脚本宝典收集整理的这篇文章主要介绍了石头理解的vue-router(一),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js></script>
npm install vue-router
import Vue From 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
this.$route // 路由记录
this.$router // 路由实例
用处: 在使用“动态路由参数”时会用到动态路由。
作用:
定义: router file
{
path: '/user/:id',
component: 'user'
}
注意: 动态路由的动态部分改变时原来的组件会被复用,这样就不会触发生命周期钩子函数。若要触发请使用watch $route或beforeRouteUpdate
使用: user file
this.$route.params.id
(待续)
越先定义优先级越高。
@H_512_127@
{
path: '/user',
name: 'name', // 命名路由
component: user,
alias: '/roler', // 别名
redirect: { name: 'foo' }, // 重定向
PRops: true // 将 this.$route.params 设置为组件属性
}
就是给路由起个名字。方便使用。
<router-link :to="{ name: 'user', params: { userId: 123 }}">user</router-link>
this.$router.push({ name: 'user', params: { userId: 123 }})
定义路由: router file
{
path: 'routeUser/:userId',
// components: {
// default: eleThree,
// second: eleSecond
// },
// props: {
// default: true,
// second: true
// },
component: routeUser,
children: [
{
path: '/',
components: {
default: routeSecond,
second: routeThree
},
props: {
default: dynamicDate,
second: true
}
}
],
props: true
}
function dynamicDate (route) {
console.LOG(route)
const now = new Date()
return {
date: now.getFullYear()
}
}
定义组件: routeUser file
<p>userId: {{userId}}</p>
<router-view></router-view>
<router-view name="second"></router-view>
props: ['userId']
1. 布尔模式 | 将 this.$route.params 设置为组件属性 |
2. 对象模式 | 按原样设置为组件属性 |
3. 函数模式 | 方便做更多的操作 |
(待续)
(待续)
2018.07.26 by stone
以上是脚本宝典为你收集整理的石头理解的vue-router(一)全部内容,希望文章能够帮你解决石头理解的vue-router(一)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。