vue-router

安装vue-router

npm install vue-router --save

引入

import VueRouter from "vue-router"
Vue.use(VueRouter)

实例化router

var router = new VueRouter({
    // ...
})

将实例化的 router 添加到 vue 的实例中

new Vue({
  el:"#app",
  router:router, //将实例化的 router 添加到 vue 的实例中
  components:{ App },
  template: '<App/>'
})

在实例化router中设置配置选项

import Apple from './components/Apple' //引入Apple组件
import Banana from './component/Banana' //引入Banana组件
var router = new VueRouter({
  mode:"history",//切换到history模式，默认是hash模式：路由后面会加上一个’#‘符号
  routes:[
    {
      path:'/apple/:color', //跳转路径   /:color->路由参数
      component：Apple
     }，
    {
      path:'/banana',
      component: Banana 
    }
  ]
})

设置 vue-router 的显示位置，通过内置组件：<router-view></router-view>
页面跳转通过：<router-link :to={path:'apple'}>跳转到苹果页面</router-link>

获取参数

通过 this.$route.params 来进行获取.
同样也可以通过页面来进行访问： {{ $router.params.color }}

路由嵌套

通过children来添加配置参数

routes:[
  {
    path:"/dad",
    component: Dad,
    children:[
      {
        path:"son1", //注意不能带斜杠
        component:Son1
      },
      {
        path:"son2",
        component:Son2
      },
    ]
  }
]

最后注意需要在组件里加上<router-view></router-view>标签

router-link组件

1.可以直接跳转：

<router-link to="/apple">跳转</router-link>

2.可以动态跳转：

<router-link :to="{path:'apple'}">跳转</router-link>

3.具名的路由：通过tag属性将标签转换为li标签

<router-link :to="{path:'apple'}" tag="li"></router-link>

命名路由

1.设置的时候可以直接给路由加上name属性，然后在<router-link :to="{name:'applePage',params:{color:'red'}}">跳转</router-link>里直接跳转(params是路由参数)

 routes:[
    {
      path:'/apple/:color', //跳转路径   /:color->路由参数
      component：Apple,
      name: 'applePage'
     }，
    {
      path:'/banana',
      component: Banana 
    }
  ]

2.路由重定向
例：将"/"地址重定向到“/apple”

routes:[
    {
      path:"/",
      redirect:"/apple"
    },
    {
      path:'/apple/:color', //跳转路径   /:color->路由参数
      component：Apple,
      name: 'applePage'
     }，
    {
      path:'/banana',
      component: Banana ,
      alias:'bananas' //别名
    }
  ]

linkActiveClass

通过配置这个选项来改变点击的样式

var router = new VueRouter({
  mode:"history",
  linkActiveClass:"active", //通过类名”active“来改变点击样式
  routes:[
    {
      // ...
    }
  ]
})