【vue】vue-router的用法

依赖安装：(c)npm install vue-router

过程：

import Vue from 'vue';

import Router from 'vue-router';

Vue.use(Router)

使用new Router()定义一个路由，并export

在main.js中import该路由，将定义个的这个路由挂载到vue的根实例中

然后可以使用<router-link :to="/***"></router-link>跳转页面

常用方法：

1.页面跳转方式：

　　htm中使用的方式：

　　　　①不带参数写法：

　　　　　　<router-link to="home">点我</router-link>

　　　　　　<router-link v-bind:to="'home'">点我</router-link>

　　　　　　<router-link :to="'home'">Home</router-link>

　　　　　　<router-link :to="{ path: 'home' }">Home</router-link>

　　　　② 带参数写法：

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

　　　　　　批注：路由配置格式：

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

　　　　　　　导航显示：/user/123 　

　　　　　B:　<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

　　　　　　　　批注：带查询参数

　　　　　　　　　　　导航显示：/register?plan=private

　　js中使用的方式：

　　　　① this.$router.push('xxx') //字符串,这里的字符串是路径path匹配噢，不是router配置里的name

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

　　　　③ this.$router.push({ name: 'user', params: { userId: 123 }}) // 命名的路由这里会变成 /user/123

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

2.获取路由相关参数：

　　① ‘http://localhost:8080/linkParamsQuestion?age=18’

　　　　let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;

　　② 'http://localhost:8080/linkParamsQuestion/user/evan/post/123’

　　　　注：user/:username/post/:post_id（这种配置方式）

　　　　let name = this.$route.params.name; // 链接里的name被封装进了 this.$route.params

3.检测路由　

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

或者

watch: {

    "$route": "routeChange",

},

methods: {

    routeChange(){

        console.log(this.$route.path);

    }

}

4.router属性

属性	说明
$route.path	当前路由对象的路径，如'/view/a'
$rotue.params	关于动态片段（如/user/`:username`)的键值对信息,如{username: 'paolino'}
$route.query	请求参数，如`/foo?user=1`获取到query.user = 1
$route.router	所属路由器以及所属组件信息
$route.matched	数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
$route.name	当前路径名字

注意：$router.matched属性，它是一个包含性的匹配，它会将嵌套它的父路由都匹配出来。

　　例如，/home/news/detail/:id这条路径，它包含3条匹配的路由：

/home/news/detail/:id
/home/news
/home

5.在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子了

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

computed: {

    key() {

        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()

    }

 }

6.路由元信息meta字段

未完待续。。。。

7.非必传参数路由配置

应用：

this.$router.push({ path: 'member', query: { type: 1 }})

错误配置：

{

    path: 'member/:type',

    hidden: false,

    component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载,

    name: 'tag/index/member',

    meta: { _menuName: '删除'}

},

效果：http://v.study.com/#/error/404?type=1

正确配置：

{

    path: 'member',

    hidden: false,

    component: resolve => require(['@/views/modules/main/delMan.vue'], resolve),//懒加载,

    name: 'tag/index/member',

    meta: { _menuName: '删除'}

},

效果

http://v.study.com/#/test/member?type=1

　　　　 https://router.vuejs.org/zh-cn/essentials/getting-started.html

　　　　　https://www.cnblogs.com/Leo_wl/p/5702350.html　

　　　　https://router.vuejs.org/zh-cn/essentials/nested-routes.html　　　　

作者：smile.轉角

QQ：493177502

秒客网

【vue】vue-router的用法

相关文章