上一篇：Vue学习之路（2）:组件通信&&代理配置&&Vuex
vue
路由
安装插件
npm -i vue-router
// main.js
import VueRouter from 'vue-router'
import router from './router'
Vue.use(VueRouter)
cd ./src
mkdir router
touch index.js
// 该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'
// 创建一个路由器
export default new VueRouter({
routes: [
{
path: 'about'
component: About
},
{
path: 'home'
component: Home
},
{
},
]
})
相关标签
<!-- router-link替代了a -->
<router-link to="/about">about</router-link>
a标签是页面跳转，而router-link非此
嵌套路由
在一个页面显示了多个路由
import About from '../components/About'
import Home from '../components/Home'
import News from '../components/News'
export default new VueRouter({
routes: [
{
path: 'about'
component: About
},
{
path: 'home'
component: Home,
// 子路由
children: [
{
path: 'news', // 子路由不加斜线
component: News,
}
]
},
]
})
<router-link to="/about/news">about</router-link>
路由的参数传递
<!-- 路由发送者 -->
<router-link to="/about/news?id=1">about</router-link>
<!-- 路由接收者 -->
{
{ $route.query.xxx }}
如果是传动态数据?有一种更好的写法
<router-link :to="{
path: '',
query: {
id: xxx,
title: 'xxx',
}
}">
now
</router-link>
命名路由
export default new VueRouter({
routes: [
{
name: 'myname'
path: 'about'
component: About
},
{
path: 'home'
component: Home,
// 子路由
children: [
{
path: 'news', // 子路由不加斜线
component: News,
}
]
},
]
})
<router-link :to="{
name: 'myname',
query: {
id: xxx,
title: 'xxx',
}
}">
now
</router-link>
params参数
<!-- 此处必须用name, 不能用path -->
<router-link :to="{
name: 'myname',
params: {
id: xxx,
title: 'xxx',
}
}">
now
</router-link>
路由的props配置
export default new VueRouter({
routes: [
{
name: 'myname'
path: 'about'
component: About
},
{
path: 'home'
component: Home,
// 子路由
children: [
{
path: 'news', // 子路由不加斜线
component: News,
// 第一种写法，传给detail组件
// 缺点：不能绑定动态数据
props: {
a: 1,
b: '2'
},
// 第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给detail组件
// 缺点,当传来的是query参数，接收的是params参数，会导致不能接收
props: true,
// 第三种写法
props($route) {
return {
id: $route.query.id,
title: $route.query.title
}
}
}
]
},
]
})
<script>
// do something
props: ['a', 'b'] // 像接收父组件一样。第一种
props: ['id', 'title']
</script>
replace属性
默认开启是push模式
replace是替换模式：替换指的是在同级组件下只能有一个历史记录存在
<!-- 开启replace模式 -->
<router-link :replace to="/about/news">about</router-link>
<router-view></router-view> <!-- 显示 -->
按步骤进退
<script>
// do something
this.$router.back() // 回退一步
this.$router.forward() // 前进一步
this.$router.go(n) // 前进n步(n>= 0)
</script>
缓存路由组件
<!-- 此处是组件名 -->
<keep-alive include="缓存哪个路由组件"> <!-- 保持活跃 -->
<router-view>
</router-view>
</keep-alive>
<!-- 此处是组件名 -->
<keep-alive :include=['a', 'b']> <!-- 保持活跃 -->
<router-view>
</router-view>
</keep-alive>
两个新的生命周期钩子
activated：被激活的
<script>
activated() {
// 点击这个组件
}
</script>
deactivated：失去激活的
<script>
deactivated() {
// 点击别的组件
}
</script>