Vue路由

配置路由文件 index.js

使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1.引入vue
import Vue from 'vue'
// 2.引入vue路由
import VueRouter from 'vue-router'
// 3.引入组件
import Hello from '@/components/Hello'
import Word from '@/components/Word'

Vue.use(VueRouter)

export default new Router({
    mode: 'history', // HTML5 History 模式
    routes:[
        {
            path: '/hello', // 路径
            component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
        },
        {
            path:'/word', // 路径
            component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
        }
    ]
})

路由文件注入到main.js文件中

import Vue from 'vue';
import App from './App';
import router from './router/index'; // 引入路由配置文件 index.js

Vue.config.productionTip = false;

// 记得要通过 router 配置参数注入路由，从而让整个应用都有路由功能
new Vue({
    el: '#app',
    router, // (缩写) 相当于 router: router
    render(h){
        return h(App);
    }
})
或者
new Vue({
    router,
    render: h => h(App) // 此写法与上边的相同，使用了箭头函数
}).$mount('#app')

组件中配置路由跳转

<template>
    <div>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接 相当 `<a>` 标签的属性 href -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link> // 浏览器解析成：<a href="/foo">Go to Foo</a>
        <router-link to="/bar">Go to Bar</router-link> // 浏览器解析成：<a href="/bar">Go to Bar</a>
        <router-link :to="href">Go to Bar</router-link> // 动态绑定to值
        <!-- 路由出口 (配置路由插座)-->
        <!-- 路由匹配到的组件将渲染在这里 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {
              href:"/hello"
            }
        }
    }
</script>

通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

嵌套路由

export default new Router({
    mode: 'history', // HTML5 History 模式
    routes:[
        {
            path: '/hello', // 路径
            component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
        },
        {
            path:'/word', // 路径
            component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
            children: [ // 嵌套路由
                {
                    path: 'profile',
                    component: UserProfile
                },
                {
                    path: 'posts',
                    component: UserPosts
                }
            ]
        }
    ]
})
要注意，以“/”开头的嵌套路径会被当作根路径。这让你充分的使用嵌套组件而无须设置嵌套的路径。
所以子路由上不用加“/”;在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。

动态路由匹配

export default new Router({
    mode: 'history', // HTML5 History 模式
    routes:[
        {
            path: '/hello', // 路径
            component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
        },
        {
            path: '/word/:id', // 动态路由匹配
            component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
            children: [ // 嵌套路由
                {
                    path: 'profile',
                    component: UserProfile
                },
                {
                    path: 'posts',
                    component: UserPosts
                }
            ]
        }
    ]
})

一个“路径参数”使用冒号 : 标记，当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用
{{ this.$route.params.id }}

一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	this.$route.params
/user/:username	/user/evan	{ username: 'evan' }
/user/:username/post/:post_id	/user/evan/post/123	{ username: 'evan', post_id: '123' }

除了 $route.params 外，$route 对象还提供了其它有用的信息，例如，$route.query (如果 URL 中有查询参数)、$route.hash 等等

响应路由参数的变化

提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。
因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

watch: {
    '$route' (to, from) {
        // 对路由变化作出响应...
    }
}

捕获所有路由或 404 Not found 路由

常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配任意路径，我们可以使用通配符 (*)：
{
    // 会匹配所有路径
    path: '*'
}
{
    // 会匹配以 `/user-` 开头的任意路径
    path: '/user-*'
}

当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

命名路由

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

export default new Router({
    mode: 'history', // HTML5 History 模式
    routes:[
        {
            path: '/hello', // 路径
            name: 'hello', // 命名路由
            component: Hello // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
        },
        {
            path: '/word/:id', // 路径
            name: 'word', // 命名路由
            component: Word // 将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们
            children: [ // 嵌套路由
                {
                    path: 'profile',
                    component: UserProfile
                },
                {
                    path: 'posts',
                    component: UserPosts
                }
            ]
        }
    ]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

这跟代码调用 router.push() 是一回事：
this.$router.push({ name: 'user', params: { id: 123 }})

编程式路由和声明式路由

this.$router.push('/路由地址') // 编程式路由
<router-link :to='/路由地址'></router-link> // 声明式路由

this.$router.replace('/路由地址') // 编程式路由
<router-link :to='/路由地址' replace> // 声明式路由

this.$router.push(location, onComplete?, onAbort?)

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push
想要导航到不同的 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' }})

注意：如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。
取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

同样的规则也适用于 router-link 组件的 to 属性。

this.$router.replace(location, onComplete?, onAbort?)

跟 this.$router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录

this.$router.go(n)

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

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

重定向和命名

重定向
const router = new VueRouter({
    routes: [{ 
        path: '/a', 
        redirect: '/b'  //当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b（显示b页面）
    }]
})
别名
const router = new VueRouter({
    routes: [{ 
        path: '/a', 
        alias: '/b'  //当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a（显示a页面），如果访问的是/a，路由匹配仍为 /a（显示a页面）
    }]
})