1. 安装路由

1.1 安装

cnpm install vue-router

1.2 版本造成报错

• 报错

√ Installed 1 packages
√ Linked 2 latest versions
√ Run 0 scripts
peerDependencies WARNING vue-router@latest requires a peer of vue@^3.2.0 but none was installed
√ All packages installed (2 packages installed from npm registry, used 2s(network 2s), speed 159.84KB/s, json 2(52.12KB), tarball 208.9KB, manifests cache hit 0, etag hit 0 / miss 0)

• 查看安装版本

cnpm view vue-router version
4.0.15

• 解决
  如下所示，选择版本：

1.3 选择版本

• 查看所有版本

cnpm view vue-router versions

[
  '0.4.0',          '0.5.0',          '0.5.1',          '0.5.2',
  '0.6.0',          '0.6.1',          '0.6.2',          '0.7.0',
  '0.7.1',          '0.7.2',          '0.7.3',          '0.7.4',
  '0.7.5',          '0.7.6',          '0.7.7',          '0.7.8',
  '0.7.9',          '0.7.10',         '0.7.11',         '0.7.12',
  '0.7.13',         '2.0.0-beta.1',   '2.0.0-beta.2',   '2.0.0-beta.3',
  '2.0.0-beta.4',   '2.0.0-rc.1',     '2.0.0-rc.2',     '2.0.0-rc.3',
  '2.0.0-rc.4',     '2.0.0-rc.5',     '2.0.0-rc.6',     '2.0.0-rc.7',
  '2.0.0',          '2.0.1',          '2.0.2',          '2.0.3',
  '2.1.0',          '2.1.1',          '2.1.2',          '2.1.3',
  '2.2.0',          '2.2.1',          '2.3.0',          '2.3.1',
  '2.4.0',          '2.5.0',          '2.5.1',          '2.5.2',
  '2.5.3',          '2.6.0',          '2.7.0',          '2.8.0',
  '2.8.1',          '3.0.0',          '3.0.1',          '3.0.2',
  '3.0.3',          '3.0.4',          '3.0.5',          '3.0.6',
  '3.0.7',          '3.1.0',          '3.1.1',          '3.1.2',
  '3.1.3',          '3.1.4',          '3.1.5',          '3.1.6',
  '3.2.0',          '3.3.0',          '3.3.1',          '3.3.2',
  '3.3.3',          '3.3.4',          '3.4.0',          '3.4.1',
  '3.4.2',          '3.4.3',          '3.4.4',          '3.4.5',
  '3.4.6',          '3.4.7',          '3.4.8',          '3.4.9',
  '3.5.0',          '3.5.1',          '3.5.2',          '3.5.3',
  '3.5.4',          '4.0.0-329e962',  '4.0.0-alpha.0',  '4.0.0-alpha.1',
  '4.0.0-alpha.2',  '4.0.0-alpha.3',  '4.0.0-alpha.4',  '4.0.0-alpha.5',
  '4.0.0-alpha.6',  '4.0.0-alpha.7',  '4.0.0-alpha.8',  '4.0.0-alpha.9',
  '4.0.0-alpha.10', '4.0.0-alpha.11', '4.0.0-alpha.12', '4.0.0-alpha.13',
  '4.0.0-alpha.14', '4.0.0-beta.1',   '4.0.0-beta.2',   '4.0.0-beta.3',
  '4.0.0-beta.4',   '4.0.0-beta.5',   '4.0.0-beta.6',   '4.0.0-beta.7',
  '4.0.0-beta.8',   '4.0.0-beta.9',   '4.0.0-beta.10',  '4.0.0-beta.11',
  '4.0.0-beta.12',  '4.0.0-beta.13',  '4.0.0-rc.1',     '4.0.0-rc.2',
  '4.0.0-rc.3',     '4.0.0-rc.4',     '4.0.0-rc.5',     '4.0.0-rc.6',
  '4.0.0',          '4.0.1',          '4.0.2',          '4.0.3',
  '4.0.4',          '4.0.5',          '4.0.6',          '4.0.7',
  '4.0.8',          '4.0.9',          '4.0.10',         '4.0.11',
  '4.0.12',         '4.0.13',         '4.0.14',         '4.0.15',
  '4.1.0-4da5e55',  '4.1.0-aabe509',  '4.1.0-c113369'
]

• 选择版本安装

cnpm install vue-router@3.5.3

2. 路由示例

语法示例

• 定义组件

定义应用于路由的组件

    const 组件名 = { template: '

显示字符

' }

• 定义路由

    const 路由名 = [
      { path: '/路径', component: 组件名 },
      ……
    ]

路径要和模块元素中的路径对上

• 创建路由实例

    const router = new VueRouter({
      routes: 路由名
    })

• 创建和挂载根实例

    const app = new Vue({
      router
    }).$mount('#app')

完整示例（赤壁之战指挥官查询系统）

  
  
  
  








赤壁之战


    
      
      
      
      东吴总指挥
      西蜀总指挥
      曹军总指挥