Vue-router使用:
参考 https://router.vuejs.org/zh-cn/
列子
const router = new Router({
mode: 'history', // 使用history模式 可以去掉路径中的 #字
routes: [
{
path: '/', //路径
name: 'First', //自己定义的名称 ,可随意写
component: First // 路径对应的vue组件
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/index',
name: 'Index',
component: Index,
redirect: { //重定向
name: 'NowData'
},
children: [ // 子路由
{
path: 'nowdata',
name: 'NowData',
component: NowData
},
{
path: 'historydata',
name: 'HistoryData',
component: HistoryData
},
{
path: 'nowposition',
name: 'NowPosition',
component: NowPosition
}
]
}
]
})
export default router
使用router
<keep-alive> // 保留当前路由生命, 切换当前路由不会重新加载,当前路由里面组件也不会触发destroyed()方法
<router-view/>
<keep-alive>
使用标签跳转 基本用法 更多参考官方文档
<router-link to="/login"></router-link>
使用js跳转 基本用法 更多参考官方文档
this.$router.push({ name:'user'})
在组件中观察路由变化 在
watch: {
$route (newValue, oldValue) {
console.log(newValue.name)
console.log(oldValue.name)
}
}
