Vue Router的使用

Vue Router作为vue单页面项目开发是必不可少的，需要处理每个页面之间的切换，那么今天就快速简要的介绍一下Vue Router的使用方法

1.  Vue Router简介+安装

Vue Router 是 Vue.js 官方的路由管理器

安装

vue add router

安装成功后，重启项目，会看到多了一个router的文件夹，这里面就是创建我们项目路由的地方

提示： 如果刚创建的新项目可以直接添加，但是如果是项目开发了一部分了，添加的时候vue router会修改页面的布局，在安装的时候要选择性的去安装使用。

2. 路由规划、配置，router/index.js

<!-- 路由的导航  -->
<nav>   
    <router-link to="/">首页</router-link>    
    <router-link to="/about">管理</router-link> 
</nav>
<!-- 路由的出口 -->
<router-view></router-view>

3. 动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对 于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中 使用“动态路径参数”(dynamic segment) 来达到这个效果：

{ path: '/user/:id', component: User }

范例：查看课程详情，views/Detail.vue

<div>   
    <h2>detail page</h2>   
    <p>{{$route.params.name}} ...</p> 
</div>

router/index.js

{   
    path: '/course/:name',   
    component: () => import('../views/Detail.vue') 
}

列表中的导航，About.vue

<router-link :to="`/course/${c.name}`"> 
{{ c.name }} - {{ c.price | currency('￥') }} 
</router-link>

4. 通配符的使用

通配符适合做404页面路由，当没有所点击的路由，或者找不到时，都会匹配到通配符下的路由页面

{ 
    // 会匹配所有路径 
    path: '*', 
    component: () => import('../views/404.vue') 
}

5. 嵌套路由

实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构 对应嵌套的各层组件，例如：

范例：嵌套方式显示课程详情

<router-link :to="`/about/${c.name}`">   
    {{ c.name }} - {{ c.price | currency('￥') }} 
</router-link>
<router-view></router-view>

路由配置

{    
    path: '/about',    
    name: 'about',    
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),    
    children: [{        
        path: ':name',        
        component: () => import('../views/Detail.vue')     
    },] 
}

响应路由参数变化，Detail.vue

export default { 
    watch: {   
        $route: {     
            handler: () => {       
                console.log("$route change");     
            },     
            immediate: true   
        } 
    } 
};

6. 编程导航

借助 router 的实例方法，可编写代码来实现编程式导航
router.push(location, onComplete?, onAbort?)

// 字符串 
router.push('home')

// 对象 
router.push({ path: 'home' })

// 命名的路由 
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 
/register?plan=private router.push({ path: 'register', query: { plan: 'private' }})

范例：修改为课程详情跳转为编程导航

<div @click="selectedCourse = c;$router.push(`/about/${c.name}`)">   
    {{ c.name }} - {{ c.price | currency('￥') }}
</div>

7. 命名路由

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。 你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

const router = new VueRouter({  
    routes: [{      
        path: '/user/:userId',      
        name: 'user',      
        component: User   
    }] 
})

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

调用 router.push() 时：

router.push({ name: 'user', params: { userId: 123 }})