VUE学习笔记——路由
基本路由
1、定义路由组件:src/views/About.vue
<template>
<div>
About
</div>
</template>
2、配置路由模块(映射成路由):src/router/index.js
//第一:引入vue-router 及各路由组件
import Vue from 'vue'
import Router from 'vue-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
import MessageDetail from '../views/MessageDetail.vue'
//第二:
Vue.use(Router)
//第三:
export default new Router({
routes: [{
path: '/', // 自动跳转路由
redirect: '/about'
},
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: [
{
path: '/home/news',
component: News
},
{
path: 'message', //简写
component: Message,
children: [
{
path: '/home/message/detail/:id', //占位
component: MessageDetail
}
]
},
{
path: '', //空表示当前路由
redirect: '/home/news'
}
]
}
]
})
3、注册路由器:src/main.js(入口文件)
import Vue from 'vue'
import App from './App.vue'
//引入router
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
//配置路由
router
})
4、应用组件:App.vue
<div>
<!--路由链接-->
<router-link to="/about">About</router-link>
<router-link to="/home">Home</router-link>
<!--用于渲染当前路由组件-->
<router-view></router-view>
</div>
嵌套路由
1、配置嵌套路由: src/router/index.js
path: '/home',
component: Home,
children: [
{
path: '/home/news',
component: News
},
{
path: 'message', //简写
component: Message,
children: [
{
path: '/home/message/detail/:id', //占位
component: MessageDetail
}
]
}
2、路由链接: Home.vue
<router-link to="/home/news">News</router-link>
<router-link to="/home/message">Message</router-link>
<router-view></route-view>
缓存路由组件对象
<keep-alive>
<router-view></router-view>
</keep-alive>
向路由组件传递数据
一、路由路径携带参数
方式1:param
1、配置路由: src/router/index.js
{
path: 'message',
component: Message,
children: [
{
name:'id1'
// 后面的 ? 表示,这个id可传可不传
path: '/home/message/detail/:id?', //占位
component: MessageDetail
}
]
}
2、配置路由: src/views/Message.vue
<template>
<div>
<ul>
<li v-for="(message,index) in messages" :key="message.id">
<router-link :to="`/home/message/detail/${message.id}`">{{message.title}}</router-link>
//或者:命名路由传递的参数值不会在url中显示,name 是路由的名字
<router-link :to="{ name:'id1', params: {id: message.id} }">{{message.title}}</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
3、 路由组件中读取请求参数: src/views/MessageDetail.vue
export default{
mounted(){
console.log(this.$route.params.id);
}
}
方式2:query
1、配置路由: src/router/index.js
{
path: 'message',
component: Message,
children: [
{
path: '/home/message/detail',
component: MessageDetail
}
]
}
2、配置路由: src/views/Message.vue
<template>
<div>
<ul>
<li v-for="(message,index) in messages" :key="message.id">
<router-link :to="`/home/message/detail?id=${message.id}`">{{message.title}}</router-link>
//或者:
<router-link :to="{ path:'/home/message/detail', query: {id: message.id} }">{{message.title}}</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
3、 路由组件中读取请求参数: src/views/MessageDetail.vue
export default{
mounted(){
console.log(this.$route.query.id);
}
}
总结
1、params要用name来引入路由;
query要用path来引入
2、params则类似于post,即在浏览器地址栏中不显示参数;
query类似于ajax中get传参,即在浏览器地址栏中显示参数
3、params是路由的一部分,必须要在路由后面添加参数名;
query是拼接在url后面的参数,没有也没关系
二、router-view属性携带数据
父组件向子组件传值
父组件:
<router-view msg="123"></router-view>
子组件:
<template>
<p>{{msg}}</p>
<template>
<script>
export default{
props:{
msg:String
}
}
</script>
编程式路由导航
1、 this.$router.push(path)
相当于点击路由链接(可以返回到当前路由界面)
2、 this.$router.replace(path)
用新路由替换当前路由(不可以返回到当前路由界面)
3、 this.$router.back()
请求(返回)上一个记录路由
4、 this.$router.go(-1)
请求(返回)上一个记录路由
5、this.$router.go(1)
请求下一个记录路由
<template>
<div>
<ul>
<li v-for="(message,index) in messages" :key="message.id">
<router-link :to="{ name:'id1', params: {id: message.id} }">{{message.title}}</router-link>
<button @click="pushShow(message.id)">push查看</button>
<button @click="replaceShow(message.id)">replace查看</button>
</li>
</ul>
<button @click="$router.back()">回退</button>
<hr>
<router-view></router-view>
</div>
</template>
<script>
......
methods: {
pushShow(id){
this.$router.push(`/home/message/detail/${id}`)
},
replaceShow(id){
this.$router.replace(`/home/message/detail/${id}`)
}
}
</script>
控制某组件在不同路由下显示/隐藏
解决方案: 利用路由的meta配置和v-show / v-if
router/routes.js :
{
path: '/register',
component: Register,
meta: { // 需要隐藏footer的路由添加此配置
isHideFooter: true
}
},
{
path: '/login',
component: Login,
meta: {
isHideFooter: true
}
},
App.vue :
<Footer v-show="!$route.meta.isHideFooter"/>