vue.js 2.0系列之 路由的使用

1，首先下载vue-router

npm install vue-router --save

2，引入并use

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

在template中的使用:
keep-alive可以缓存组件，提高渲染效率。保持用户对页面的修改

 <keep-alive>
        <router-view></router-view>
</keep-alive>

router-link可以使改变路由，
:to=”{ path: item.path }” 表示要跳转的路径
tag=”li” 表示最中渲染成li

 <ul>
   <router-link v-for="(item,index) in products" 
       :key="index"  
       :to="{ path: item.path }"
       tag="li" 
       active-class="active">
            {{ item.name }}
  </router-link>
</ul>

3，获取路由参数

路由配置

routes: [
    {
        path: '/home/：cur',
        component: index
    },

在js里姐可以使用$route获取参数

this.$route.path   //cur

4，导航守卫

路由跳转前做一些验证，比如登录验证（未登录去登录页），是网站中的普遍需求

const vueRouter = new Router({  
    routes: [  
        //......  
        {  
          path: '/account',  
          name: 'account',  
          component: Account,  
          children: [  
            {name: 'course', path: 'course', component: CourseList},  
            {name: 'order', path: 'order', component: OrderList}  
          ]  
        }  
    ]  
});  
vueRouter.beforeEach(function (to, from, next) {  
    const nextRoute = [ 'account', 'order', 'course'];  
    const auth = store.state.auth;  
    //跳转至上述3个页面  
    if (nextRoute.indexOf(to.name) >= 0) {  
        //未登录  
        if (!store.state.auth.IsLogin) {  
            vueRouter.push({name: 'login'})  
        }  
    }  
    //已登录的情况再去登录页，跳转至首页  
    if (to.name === 'login') {  
        if (auth.IsLogin) {  
            vueRouter.push({name: 'home'});  
        }  
    }  
    next();  
});  

5，js里改变路由

this.$router.push({path: '/coach/' + this.$route.params.id, query: queryData});

6，视图中制定不同的组件

在路由配置中：

template中：

7，路由重定向