基本路由

1、下载路由插件，npm install vue-router --save

 

 

2、在src/views下创建路由组件，以About和Home为例

备注：在实际项目中，组件分为：路由组件和非路由组件，路由组件一般放在src/views或者src/pages下面，非路由组件放在components下面

 

3、创建路由模块，一般放在src/router/index.js中

3.1、引入Vue

3.2、引入下载的路由器插件

3.3、引入创建好的路由组件

3.4、声明使用路由器插件

3.5、向外暴露路由器对象并配置N个路由

/*
路由器模块
 */

// 引入Vue
import Vue from 'vue'

// 引入路由器插件
import VueRouter from 'vue-router'

// 引入路由组件
import About from '../views/About'
import Home from '../views/Home'

// 声明使用路由器插件
Vue.use(VueRouter)

// 向外暴露路由器对象。这里为默认暴露，则引入的时候可使用任何名字
export default new VueRouter({
  // 配置N个路由
  // path指定路由地址
  // component指定路由地址对应的路由组件
  // redirect重定向到某个路由
  routes: [
    {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
    },
    {
      // 访问项目根路径时重定向到/about路由
      path: '/',
      redirect: '/about'
    }
  ]
})

 

4、配置路由器，在入口js文件src/main.js文件中配置

4.1、引入路由器

4.2、配置路由器

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

// 引入路由器
// 这里没有具体指定到index.js是因为如下写法会默认找/router/index.js
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router // 配置路由器
})

5、使用路由链接和显示当前路由链接对应的组件

备注：根据选中的路由链接，在指定位置显示当前选中的路由链接对应的路由组件

5.1、使用路由链接

<div class="list-group">
    <!--生成路由链接,to指定路由链接的path-->
    <router-link to="/about" class="list-group-item">About</router-link>
    <router-link to="/home" class="list-group-item">Home</router-link>
</div>

 

5.2、显示当前路由链接对应的组件

<div class="panel-body">
    <!--显示当前路由链接对应的组件-->
    <router-view></router-view>
</div>