路由 vue-router

参数 name使用:

路由配置: import Main from './views/Main' routes: [ { path: '/main', name: 'main', # 为该路由起名,通过name即可指定该路由 component: Main } ] 

 

视图使用: 1): <router-link :to="{name: 'main'}">主页</router-link> 2): this.$router.push({ name:'course-detail', });

 

补充 : router-link与系统a标签的区别

router-link：会被vue渲染成a标签，但是点击这样的a标签不能发生页面的转跳，只会出现组件的替换 a：也可以完成同样的效果，但是会发生页面的转跳

 

路由传参

第一种:

router.js

routes: [ // ... { path: '/course/:id/detail', name: 'course-detail', component: CourseDetail }, ]注意:// path如果是通过to直接访问，路由必须完全对应// :id代表可以完成任意内容匹配，用变量id保存

 

跳转.vue

<template> <!-- 1.标签跳转 --> <router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link> </template> <script> // ... goDetail() { // 2.逻辑跳转 this.$router.push(`/course/${this.course.id}/detail`); } </script>

 

接收.vue

created() { let id = this.$route.params.id; }

第二种:

router.js

routes: [ // ... { path: '/course/detail', name: 'course-detail', component: CourseDetail }, ]

 

跳转.vue

<template> <!-- 1.标签跳转 --> <router-link :to="{ name: 'course-detail', query: {id: course.id} }">{{ course.name }}</router-link> </template> <script> // ... goDetail() { // 2.逻辑跳转 this.$router.push({ name: 'course-detail', query: { id: this.course.id } }); } </script>

 

接收.vue

created() { let id = this.$route.query.id; }

 

补充:

方法 go

methods: { goPage() { // 返回上两页 this.$router.go(-2); // 前进一页 this.$router.go(1); } }

 

跨组件传参的四种方式

// 1) localStorage：永久存储数据　　　　this.cTitle && (localStorage.cTitle = this.cTitle); // 2) sessionStorage：临时存储数据(刷新页面数据不重置，关闭再重新开启标签页数据重置) // 3) cookie：临时或永久存储数据(由过期时间决定) // 4) vuex的仓库(store.js)：临时存储数据(刷新页面数据重置)

 

vuex 方式:

store.js

export default new Vuex.Store({ state: { cTitle:'课程页', hTitle:'主页' }, mutations: {}, actions: {} })

 

SetTitle.vue

<template> <div> <Nav></Nav> <p> 修改课程页标题 <input type="text" v-model="cTitle"> <button @click="changeCTitle">修改</button> </p> <p> 修改主页标题 <input type="text" v-model="hTitle"> <button @click="changeHTitle">修改</button> </p> </div> </template> <script> import Nav from '@/components/Nav' export default { name: "SetTitle", components: { Nav }, data() { return { cTitle: '', hTitle: '', } }, methods: { changeCTitle() { this.$store.state.cTitle = this.cTitle; 　　　　　　　　　　// this.$store.state.cTitle 就可以拿到vuex仓库中state内的值　　　　　　　　　　// store是vue实例的成员 // this.$store.commit('setCTitle', this.cTitle); }, changeHTitle(){ this.hTitle && (localStorage.hTitle = this.hTitle); } } } </script> <style scoped> </style>

总结:

 在任意组件中给仓库变量赋值

this.$store.state.title = 'newTitle' this.$store.commit('setTitle', 'newTitle')

在任意组件中取仓库变量的值

console.log(this.$store.state.title)