VUE学习(二十二)、路由
一、路由的基本使用
1、安装路由插件，在main.js中使用插件
main.js(下同)
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'
//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)
//创建vm
new Vue({
el:'#app',
render: h => h(App),
router:router
})
2、项目文件
3、router文件夹下的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
}
]
})
4、About组件和Home组件
About
<template>
<h2>我是About的内容</h2>
</template>
<script>
export default {
name:'About'
}
</script>
Home
<template>
<h2>我是Home的内容</h2>
</template>
<script>
export default {
name:'Home'
}
</script>
5、App.vue
<template>
<div>
<div class="row">
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header"><h2>Vue Router Demo</h2></div>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-xs-offset-2">
<div class="list-group">
<!-- 原始html中我们使用a标签实现页面的跳转 -->
<!-- <a class="list-group-item active" href="./about.html">About</a> -->
<!-- <a class="list-group-item" href="./home.html">Home</a> -->
<!--
Vue中借助router-link标签实现路由的切换（router-link标签最后都会变为a标签）
-->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body">
<!-- 指定组件的呈现位置 -->
<router-view></router-view>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
二、多级路由、命名路由
拥有多个组件，组件中又有组件
1、router文件夹下 index.js 配置多级路由
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
path: "/about",
component: About
},
{
path: "/home",
component: Home,
children: [
{
path: "news",
component: News
},
{
path: "message",
component: Message
}
]
}
]
});
2、路由的命名
export default new VueRouter({
routes:[
{
name:'guanyu', // 路由的命名
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News,
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail',
component:Detail,
}
]
}
]
}
]
})
三、路由的query参数
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<!-- path可以用路由的命名代替 -->
<router-link
:to="{
path: '/home/message/detail',
query: {
id: m.id,
title: m.title
}
}"
>
{{ m.title }}
</router-link>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Message",
data() {
return {
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" }
]
};
}
};
</script>
接收（其他组件接收）：
<ul>
<li>消息编号：{{$route.query.id}}</li>
<li>消息标题：{{$route.query.title}}</li>
</ul>
四、路由的params参数
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link
:to="{
name: 'xiangqing',
params: {
id: m.id,
title: m.title
}
}"
>
{{ m.title }}
</router-link>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Message",
data() {
return {
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" }
]
};
}
};
</script>
接收（其他组件接收）：
<ul>
<li>消息编号：{{$route.params.id}}</li>
<li>消息标题：{{$route.params.title}}</li>
</ul>
五、路由的props配置
1、在router文件夹下 index.js 中配置props
// 该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import About from "../pages/About";
import Home from "../pages/Home";
import News from "../pages/News";
import Message from "../pages/Message";
import Detail from "../pages/Detail";
//创建并暴露一个路由器
export default new VueRouter({
routes: [
{
name: "guanyu",
path: "/about",
component: About
},
{
path: "/home",
component: Home,
children: [
{
path: "news",
component: News
},
{
path: "message",
component: Message,
children: [
{
name: "xiangqing",
path: "detail",
component: Detail,
// props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
// props:{a:1,b:'hello'}
// props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params（只能是params）参数，以props的形式传给Detail组件。
// props:true
//props的第三种写法，值为函数
props($route) {
return {
id: $route.query.id,
title: $route.query.title,
a: 1,
b: "hello"
};
}
}
]
}
]
}
]
});
2、父组件中携带
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link
:to="{
name: 'xiangqing',
query: {
id: m.id,
title: m.title
}
}"
>
{{ m.title }}
</router-link>
</li>
</ul>
<hr />
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "Message",
data() {
return {
messageList: [
{ id: "001", title: "消息001" },
{ id: "002", title: "消息002" },
{ id: "003", title: "消息003" }
]
};
}
};
</script>
3、子组件中接收
<template>
<ul>
<li>消息编号：{{ id }}</li>
<li>消息标题：{{ title }}</li>
</ul>
</template>
<script>
export default {
name: "Detail",
props: ["id", "title"],
computed: {
// id(){
// return this.$route.query.id
// },
// title(){
// return this.$route.query.title
// },
},
mounted() {
// console.log(this.$route)
}
};
</script>
六、router-link的replace属性
添加replace属性后此页面没有返回操作（回退到上一页）
写法 replace 或 :replace=“true”
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<router-view></router-view>
</div>
</div>
</template>
七、编程式路由导航
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Vue Router Demo</h2>
<button @click="back">后退</button>
<button @click="forward">前进</button>
<button @click="test">测试一下go</button>
</div>
</div>
</template>
<script>
export default {
name: "Banner",
methods: {
back() {
this.$router.back(); // 回退一步
// console.log(this.$router)
},
forward() {
this.$router.forward(); // 前进一步
},
test() {
this.$router.go(3); // 整数 跳转到指定的前进步数，负数则后退
}
}
};
</script>
八、缓存路由组件
<template>
<div>
<h2>Home组件内容</h2>
<div>
<ul class="nav nav-tabs">
<li>
<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
</li>
<li>
<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
</li>
</ul>
<!-- 如果不配置include属性则全部缓存 -->
<!-- 缓存多个路由组件 -->
<!-- <keep-alive :include="['News','Message']"> -->
<!-- 缓存一个路由组件 -->
<keep-alive include="News">
<router-view></router-view>
</keep-alive>
</div>
</div>
</template>
<script>
export default {
name: "Home"
/* beforeDestroy() {
console.log('Home组件即将被销毁了')
}, */
/* mounted() {
console.log('Home组件挂载完毕了',this)
window.homeRoute = this.$route
window.homeRouter = this.$router
}, */
};
</script>
九、两个新的生命周期钩子
<template>
<ul>
<li :style="{ opacity }">欢迎学习Vue</li>
<li>news001 <input type="text" /></li>
<li>news002 <input type="text" /></li>
<li>news003 <input type="text" /></li>
</ul>
</template>
<script>
export default {
name: "News",
data() {
return {
opacity: 1
};
},
/*
beforeDestroy() {
console.log('News组件即将被销毁了')
clearInterval(this.timer)
},
*/
/*
mounted(){
this.timer = setInterval(() => {
console.log('@')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
*/
/* 以下两个生命周期钩子是路由组件独有的，当显示和不显示这个组件时触发 */
activated() {
console.log("News组件被激活了");
this.timer = setInterval(() => {
console.log("@");
this.opacity -= 0.01;
if (this.opacity <= 0) this.opacity = 1;
}, 16);
},
deactivated() {
console.log("News组件失活了");
clearInterval(this.timer);
}
};
</script>
5097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
