vue路由学习-简单路由

先把文件的目录组成放上来，src下的components存放的是非路由组件，views存放的是路由组件，router下的index.js是路由器模块

1. 定义路由组件 映射成路由

index.js

/**
 * 路由器模块
 */

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个路由
  routes: [
  {
      path: '/about',
      component: About
    },
    {
      path: '/home',
      component: Home
     }]

2. 注册路由

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// eslint-disable-next-line no-new
new Vue({ // 配置对象属性名都是确定名称
  el: '#app',
  components: {App},
  template: '<App/>',
  router
})

3. 使用路由

3.1 引入路由链接标签

App.vue

 <router-link to="/about" class="list-group-item">About</router-link>
 <router-link to="/home" class="list-group-item">Home</router-link>

3.2 路由显示

App.vue

<router-view  msg="idol"></router-view>

4. 补充

4.1 默认显示某一路由界面

index.js

export default new VueRouter({
  // n个路由
  routes: [
  	{
      path: '',
      redirect: '/about'
    }
  ]
})

4.2 为某一显示的路由指定样式

linkActiveClass: 'active', // 指定选中的路由链接的 class