Vue.js路由(Vue-router)

装置

间接引入

<script src="vue.js"></script><script src="vue-router.js"></script>

vue-router下载链接
https://unpkg.com/vue-router/...

npm下载

npm install vue-router

如果在一个模块化工程中应用它，必须要通过 Vue.use() 明确地装置路由性能：
在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码

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

开始

引入Vue和VueRouter插件

<script src="vue.js"></script><script src="vue-router.js"></script>

书写html

<div id="box"> </div><!--定义模版--><template id="a">    <div>        第一个router    </div></template><template id="b">    <div>        第二个router    </div></template>

书写js

var routes = [    {        path:"/one",        component:{template:"#a"}    },    {        path:"/two",        component:{template:"#b"}    },];// 定义路由组件var router = new VueRouter({    routes});// 定义路由new Vue({    el:"#box",    router});// 创立和挂载实例

将模版削减链接

<div id="box">     <router-link to="/one">One</router-link>    <router-link to="/two">Two</router-link>    <router-view></router-view></div>

< router-link > 默认会被渲染成一个 <a> 标签 >>>to=""为咱们定义的路由

< router-view > 路由匹配到的组件将渲染在这里

动静路由匹配

咱们常常须要把某种模式匹配到的所有路由，全都映射到同个组件。例如，咱们有一个 User 组件，对于所有 ID 各不相同的用户，都要应用这个组件来渲染。那么，咱们能够在 vue-router 的路由门路中应用『动静门路参数』（dynamic segment）来达到这个成果：

{    path:"/two:id",    component:{template:"#b"},},

当咱们在地址前面间接增加任意字符,咱们会发现文档内容随着咱们的更改而扭转.

嵌套路由

咱们常常将动静路由和嵌套路由独特应用,嵌套路由即是在原路由的根底上减少一个 children ,children 是一个数组.并且咱们还须要在原来的组件上增加< router-view >来渲染 chlidren 外面的路由.

<template id="b">    <div>        第二个router        <router-view>                        </router-view>     </div></template><template id="c">    <div>        user:{{ $route.params.id }}    </div></template>

{    path:"/two",    component:{template:"#b"},    children:[        {            path:":id",            component:{                template:"#c"            }        }    ]},

这样咱们就能够这样增加地址

编程式导航

除了应用 <router-link> 创立 a 标签来定义导航链接，咱们还能够借助 router 的实例办法，通过编写代码来实现。

router.push(location)

想要导航到不同的 URL，则应用 router.push 办法。这个办法会向 history 栈增加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个办法会在外部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

该办法的参数能够是一个字符串门路，或者一个形容地址的对象。例如：

// 字符串router.push('home')// 对象router.push({ path: 'home' })// 命名的路由router.push({ name: 'user', params: { userId: 123 }})// 带查问参数，变成 /register?plan=privaterouter.push({ path: 'register', query: { plan: 'private' }})

router.replace(location)

跟 router.push 很像，惟一的不同就是，它不会向 history 增加新记录，而是跟它的办法名一样 —— 替换掉以后的 history 记录。

router.go(n)

这个办法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，相似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()router.go(1)// 后退一步记录，等同于 history.back()router.go(-1)// 后退 3 步记录router.go(3)// 如果 history 记录不够用，那就默默地失败呗router.go(-100)router.go(100)

命名路由

有时咱们通过一个名称来标识一个路由显得更不便一些，特地是在链接一个路由，或者是执行一些跳转的时候。你能够在创立 Router 实例的时候，在 routes 配置中给某个路由设置名称。

咱们间接在路由下增加一个 name 即可.

var routes = [    {        path:"/one",        name:"one",        component:{template:"#a"}    },    {        path:"/two",        name:"two",        component:{template:"#b"},    },]

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

<router-link :to="{ name: 'one'}">User</router-link><router-link :to="{ name: 'two'}">User</router-link>

命名视图

有时候想同时（同级）展现多个视图，而不是嵌套展现，例如创立一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你能够在界面中领有多个独自命名的视图，而不是只有一个独自的进口。如果 router-view 没有设置名字，那么默认为 default。

 <router-view></router-view>    <router-view></router-view>

当咱们的视图如上时,咱们会发现每一个路由被渲染了两次,所以咱们须要为视图命名

 <router-view name="a"></router-view>    <router-view name="b"></router-view>

var Foo = { template: '<div>foo</div>' }var Bar = { template: '<div>bar</div>' }var routes = [        {            path:"/one",            name:"one",            components:{                a:Foo,                b:Bar            }        },    ]

重定向和别名

重定向

重定向(Redirect)就是通过各种办法将各种网络申请从新定个方向转到其它地位,用于网站调整或网页被移到一个新地址,它也是通过 routes 配置来实现，上面例子是从 /a 重定向到 /b：

var router = new VueRouter({  routes: [    { path: '/a', redirect: '/b' }  ]})

别名

/a 的别名是 /b，意味着，当用户拜访 /b 时，URL 会放弃为 /b，然而路由匹配则为 /a，就像用户拜访 /a 一样。简略的说就是给 /a 起了一个外号叫做 /b ,然而实质上还是 /a

下面对应的路由配置为：

var router = new VueRouter({  routes: [    { path: '/a', component: A, alias: '/b' }  ]})

『别名』的性能让你能够自在地将 UI 构造映射到任意的 URL，而不是受限于配置的嵌套路由构造。