概述

Vue Router 是 Vue.js 官方的路由管理器 github: https://github.com/vuejs/vue-router 中文官方网站https://router.vuejs.org/zh/ 安装vue-router

npm isntall vue-router --save

HelloWorld

1. 创建组件Bar.vue

<template>
    <div >
        <h1>Bar</h1>
        <router-link to="foo">跳转到Foo</router-link>
    </div>
</template>

<script>
    export default {
        name: 'Bar',
    }
</script>

1. 创建组件Foo.vue

<template>
    <div>
        <h1>Foo</h1>
        <router-link to="bar">跳转到Bar</router-link>
    </div>
</template>

<script>
    export default {
        name: "Foo",
    }
</script>

<style scoped>

</style>

1. 创建文件router,在其目录下创建index.js文件

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

import Bar from '../components/Bar'
import Foo from '../components/Foo'

export default new Router({
    routes: [
        {
          path:"/",
          redirect:"/foo"
        },
        {
            path: '/foo',
            component: Foo
        },
        {
            path: '/bar',
            component: Bar
        }
    ]
});

1. 将App.vue修改

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png">
        <router-view></router-view>
        </div>
</template>

<style>
    #app {
        text-align: center;
        margin-top: 60px;
    }
</style>

1. 在main.js注册路由器

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

动态路由

创建组件User.vue

<template>
    <div>
        {{$route.params.id}}
    </div>
</template>

修改router目录的index文件

import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
import User from  '../components/User'

export default new Router({
    routes: [
        {
            path:'/user/:id',
            component:User
        }
    ]
});

访问的http://localhost:8080/#/user/12347

图片.png

设置“路径参数”,将User.vue 修改成

<template>
    <div>
        {{$route.query.id}}
    </div>
</template>

增加路由配置

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

访问路径 http://localhost:8080/#/user?id=2

router-view

创建组件文件Profile.vue

<template>
    <div>
        用户画子界面
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

修改路由文件router/index.js

import Router from 'vue-router'
import Vue from 'vue'
Vue.use(Router)
import User from  '../components/User'
import Profile from '../components/Profile'
export default new Router({
    routes: [

        {
            path:'/user',
            component:User,
            children:[
                {
                    path:"profile",
                    component:Profile
                }

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

    ]
});

同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。 访问http://localhost:8080/#/user/profile

图片.png

路由组件传参

方式 1: 路由路径携带参数(param/query) 配置路由

children: [
{
path: 'mdetail/:id',
component: MessageDetail
}
]

路由路径 参数传递 注意需要加上冒号:

<router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link>

路由组件中读取请求参数,获取传递数据 注意是route 而不是router

this.$route.params.id

方式2 <router-view>属性携带数据

<router-view :msg="msg"></router-view>

缓存路由组件对象

1. 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
2. 如果可以缓存路由组件对象, 可以提高用户体验

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

路由导航

相关 API

1. this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
2. this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
3. this.$router.back(): 请求(返回)上一个记录路由
4. this.$router.go(-1): 请求(返回)上一个记录路由
5. this.$router.go(1): 请求下一个记录路由