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=private
router.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，而不是受限于配置的嵌套路由构造。