VUE框架之路由层，仓库层
Posted sr-program
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE框架之路由层，仓库层相关的知识，希望对你有一定的参考价值。
一：路由跳转
this.$router.push(‘/course‘); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: ‘course‘}">课程页</router-link>
<template> <div class="nav"> <ul> <li :class="{active: currentPage === ‘/‘}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === ‘/course‘}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === ‘/course_detail‘}"> <!-- 路由跳转--> <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav" } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px ‘微软雅黑‘; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: ‘Python入门到入土‘ }, { id: 2, name: ‘前端放弃攻略‘ }, { id: 3, name: ‘你最棒，他最强‘ }, { id: 4, name: ‘基佬修炼法则‘ }, ]; export default { name: "course", components: { Nav }, data() { return { course_list } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail(){ // this.$router.push({name:‘course_detail‘}) this.$router.push({name: ‘course_detail‘}); } }, } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> </div> </template> <script> import Nav from "../components/Nav"; export default { name: ‘home‘, components: { Nav, }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail(){ this.$router.push({name: ‘course_detail‘}); // 路由跳转 } } } </script>
二：路由传参
（1）方式一
<template> <div class="course-card"> <h3 @click="goDetail">{{course.name}}</h3> </div> </template> <script> export default { name: "CourseCard", props: [‘course‘], methods:{ goDetail(){ this.$router.push({ name:‘course_detail‘, query:{id:this.course.id}, // 页面刷新传参不会消失 params:{id:this.course.id} // 页面刷新传参会消失 }) } } } </script> <style scoped> .course-card h3, .course-card a { width: 200px; height: 200px; border-radius: 50%; background-color: coral; font: normal 20px/200px ‘STSong‘; float: left; text-align: center; cursor: pointer; display: block; } </style>
<template> <div class="nav"> <ul> <li :class="{active: currentPage === ‘/‘}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === ‘/course‘}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === ‘/course_detail‘}"> <!-- 路由跳转--> <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data(){ return{ currentPage:‘‘ } }, created() { this.currentPage = this.$route.path } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px ‘微软雅黑‘; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程页</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from ‘@/components/CourseCard‘ let course_list = [ { id: 1, name: ‘Python入门到入土‘ }, { id: 2, name: ‘前端放弃攻略‘ }, { id: 3, name: ‘你最棒，他最强‘ }, { id: 4, name: ‘基佬修炼法则‘ }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: ‘course_detail‘}); } }, } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: ‘Python入门到入土‘, price: 6.66, info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘ }, { id: 2, name: ‘前端放弃攻略‘, price: 3.66, info: ‘学习前端，忘掉所有痛苦！‘ }, { id: 3, name: ‘你最棒，他最强‘, price: 5.22, info: ‘别做梦了！‘ }, { id: 4, name: ‘基佬修炼法则‘, price: 80000, info: ‘就是他，错不了！‘ }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); } }, created() { let id = this.$route.query.id; // 接受传参值 // let id = this.$route.query.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goBack">页面前进返回</button> <h2>主页</h2> <hr> </div> </template> <script> import Nav from "../components/Nav"; export default { name: ‘home‘, components: { Nav, }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail() { this.$router.push({name: ‘course_detail‘}); // 路由跳转 } } } </script>
PS：
（1）query：传参的时候刷新页面传参数据不会消失
（2）params：传参的时候刷新页面数据会消失
（2）方式二
<template> <div class="nav"> <ul> <li :class="{active: currentPage === ‘/‘}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === ‘/course‘}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === ‘/course_detail‘}"> <!-- 路由跳转--> <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data(){ return{ currentPage:‘‘ } }, created() { this.currentPage = this.$route.path } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px ‘微软雅黑‘; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div class="course-card"> <h3 @click="goDetail">{{course.name}}</h3> </div> </template> <script> export default { name: "CourseCard", props: [‘course‘], methods:{ goDetail(){ this.$router.push( this.$router.push(`/course_detail/${this.course.id}`) // 通过传参id 需要使用``这个双引号可以添加变量 ) } } } </script> <style scoped> .course-card h3, .course-card a { width: 200px; height: 200px; border-radius: 50%; background-color: coral; font: normal 20px/200px ‘STSong‘; float: left; text-align: center; cursor: pointer; display: block; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程页</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from ‘@/components/CourseCard‘ let course_list = [ { id: 1, name: ‘Python入门到入土‘ }, { id: 2, name: ‘前端放弃攻略‘ }, { id: 3, name: ‘你最棒，他最强‘ }, { id: 4, name: ‘基佬修炼法则‘ }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: ‘course_detail‘}); } }, } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: ‘Python入门到入土‘, price: 6.66, info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘ }, { id: 2, name: ‘前端放弃攻略‘, price: 3.66, info: ‘学习前端，忘掉所有痛苦！‘ }, { id: 3, name: ‘你最棒，他最强‘, price: 5.22, info: ‘别做梦了！‘ }, { id: 4, name: ‘基佬修炼法则‘, price: 80000, info: ‘就是他，错不了！‘ }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); } }, created() { let id = this.$route.params.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goBack">页面前进返回</button> <h2>主页</h2> <hr> </div> </template> <script> import Nav from "../components/Nav"; export default { name: ‘home‘, components: { Nav, }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail() { this.$router.push({name: ‘course_detail‘}); // 路由跳转 } } } </script>
{
path: ‘/course_detail/:id‘, // 类似于正则表达式
name: ‘course_detail‘,
component: course_detail
},
PS：
（1）此种方式使用了正则表达式 通过匹配正则传递的参数 进行数据的筛选
三：VUE跨组件传参
（1）方式一：localstorage
<template> <div class="course-card"> <h3 @click="goDetail">{{course.name}}</h3> </div> </template> <script> export default { name: "CourseCard", props: [‘course‘], methods:{ goDetail(){ this.$router.push( { name:‘course_detail‘, query:{id:this.course.id} } // 通过传参id 需要使用``这个双引号可以添加变量 ) } } } </script> <style scoped> .course-card h3, .course-card a { width: 200px; height: 200px; border-radius: 50%; background-color: coral; font: normal 20px/200px ‘STSong‘; float: left; text-align: center; cursor: pointer; display: block; } </style>
<template> <div class="nav"> <ul> <li :class="{active: currentPage === ‘/‘}"> <router-link to="/">主页</router-link> </li> <li :class="{active: currentPage === ‘/course‘}"> <router-link to="/course">课程</router-link> </li> <li :class="{active: currentPage === ‘/course_detail‘}"> <!-- 路由跳转--> <router-link :to="{name: ‘course_detail‘}">课程详情页</router-link> </li> </ul> </div> </template> <script> export default { name: "Nav", data(){ return{ currentPage:‘‘ } }, created() { this.currentPage = this.$route.path } } </script> <style scoped> .nav { width: 100%; height: 60px; background-color: black; } .nav li { float: left; font: normal 20px/60px ‘微软雅黑‘; padding: 0 30px; } .nav li:hover { cursor: pointer; background-color: aquamarine; } .nav li.active { cursor: pointer; background-color: aquamarine; } </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>{{cTitle}}</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from ‘@/components/CourseCard‘ let course_list = [ { id: 1, name: ‘Python入门到入土‘ }, { id: 2, name: ‘前端放弃攻略‘ }, { id: 3, name: ‘你最棒，他最强‘ }, { id: 4, name: ‘基佬修炼法则‘ }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list, cTitle: ‘课程页‘ } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: ‘course_detail‘}); } }, created() { localStorage.cTitle && (this.cTitle = localStorage.cTitle) } } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <p> 主页:<input type="text" v-model="hTitle"> <!-- 点击修改主页的名称会发生改名--> <button @click="changehTitle">修改主页</button> </p> <p> 课程页:<input type="text" v-model="cTitle"> <!-- 点击修改课程页的名称会发生改名--> <button @click="changecTitle"> 修改课程页</button> </p> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: ‘Python入门到入土‘, price: 6.66, info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘ }, { id: 2, name: ‘前端放弃攻略‘, price: 3.66, info: ‘学习前端，忘掉所有痛苦！‘ }, { id: 3, name: ‘你最棒，他最强‘, price: 5.22, info: ‘别做梦了！‘ }, { id: 4, name: ‘基佬修炼法则‘, price: 80000, info: ‘就是他，错不了！‘ }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, hTitle: ‘‘, cTitle: ‘‘, } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); }, changehTitle() { this.hTitle && (localStorage.hTitle = this.hTitle); // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立 }, changecTitle() { this.cTitle && (localStorage.cTitle = this.cTitle) // 只有this.cTitle为真（也就是输入的有值） 后面的才会成立 }, }, created() { let id = this.$route.query.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
<template> <div class=""> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goBack">页面前进返回</button> <h2>{{hTitle}}</h2> <hr> </div> </template> <script> import Nav from "../components/Nav"; export default { name: ‘home‘, components: { Nav, }, data() { return { hTitle: ‘主页‘ } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) // 跳转到页面 } }, goBack() { this.$router.go(-1); // 返回上一页 this.$router.go(-2); // 返回上两页 this.$router.go(1) // 前进一页 }, gocourse_detail() { this.$router.push({name: ‘course_detail‘}); // 路由跳转 } }, created() { localStorage.hTitle && (this.hTitle = localStorage.hTitle) // 如果localStorage有值 则使用仓库的 没有值使用默认值 } } </script>
PS:
（1）上述课程详情页 更改了主页与课程页面的名称 且刷新之后课程名称不会更改为原有的
（2）localstorage存储的是永久的数据
（2）方式二：VUE仓库（store.js）
（1）
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="gocourse_detail(‘/course_detail‘)">跳转课程详情页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>{{cTitle}}</h2> <hr> <div> <CourseCard v-for="course in course_list" :key="course.name" :course="course"></CourseCard> </div> </div> </template> <script> import Nav from "../components/Nav"; import CourseCard from ‘@/components/CourseCard‘ let course_list = [ { id: 1, name: ‘Python入门到入土‘ }, { id: 2, name: ‘前端放弃攻略‘ }, { id: 3, name: ‘你最棒，他最强‘ }, { id: 4, name: ‘基佬修炼法则‘ }, ]; export default { name: "course", components: { Nav, CourseCard }, data() { return { course_list, cTitle: ‘课程页‘ } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1) }, gocourse_detail() { this.$router.push({name: ‘course_detail‘}); } }, created() { this.cTitle = this.$store.state.cTitle // 获取仓库数据 } } </script> <style scoped> </style>
<template> <div> <Nav></Nav> <button type="button" @click="goPage(‘/course‘)">跳转课程页面</button> <button type="button" @click="goPage(‘/‘)">跳转主页</button> <button type="button" @click="goBack">页面前进返回</button> <h2>课程详情页</h2> <p> 主页:<input type="text" v-model="hTitle"> <!-- 点击修改主页的名称会发生改名--> <button @click="changehTitle">修改主页</button> </p> <p> 课程页:<input type="text" v-model="cTitle"> <!-- 点击修改课程页的名称会发生改名--> <button @click="changecTitle"> 修改课程页</button> </p> <hr> <p> {{course.name}} </p> <p> {{course.info}}</p> <p> {{course.price}}</p> </div> </template> <script> import Nav from "../components/Nav"; let course_list = [ { id: 1, name: ‘Python入门到入土‘, price: 6.66, info: ‘三分钟入门，一分钟入土！学了你不吃亏，不学你就废了！‘ }, { id: 2, name: ‘前端放弃攻略‘, price: 3.66, info: ‘学习前端，忘掉所有痛苦！‘ }, { id: 3, name: ‘你最棒，他最强‘, price: 5.22, info: ‘别做梦了！‘ }, { id: 4, name: ‘基佬修炼法则‘, price: 80000, info: ‘就是他，错不了！‘ }, ]; export default { name: "Course-detail", components: { Nav }, data() { return { course: {}, hTitle: ‘‘, cTitle: ‘‘, } }, methods: { goPage(path) { let current_path = this.$route.path; if (current_path != path) { this.$router.push(path) } }, goBack() { this.$router.go(-1); this.$router.go(1); }, changehTitle() { this.hTitle && (localStorage.hTitle = this.hTitle); // 只有this.hTitle为真（也就是输入的有值） 后面的才会成立 }, changecTitle() { console.log(this.$store); // 查看仓库数据存储在哪个目录下 this.$store.state.cTitle = this.cTitle; // 数据更改 }, }, created() { let id = this.$route.query.id; // 接受传参值 for (let courses of course_list) { // 便利所有的值 if (id == courses.id) { this.course = courses; break } } } } </script> <style scoped> </style>
import Vue from ‘vue‘
import Vuex from ‘vuex‘
import cookies from ‘vue-cookies‘
Vue.use(Vuex);
Vue.use(cookies);
export default new Vuex.Store({
state: {
cTitle:‘课程页‘
},
mutations: {
},
actions: {
}
})
PS:
（1）如上述课程详情页从仓库获取数据更改了课程页的名称
（2）刷新更改名称之后的页面 页面名称又恢复之前的页面
（3）vue通过仓库存储的数据 不会临时有效刷新就没了
（2）仓库插件
export default new Vuex.Store({
state: {
title: ‘默认值‘
},
mutations: {
// mutations 为 state 中的属性提供setter方法
// setter方法名随意，但是参数列表固定两个：state, newValue
setTitle(state, newValue) {
state.title = newValue;
}
},
actions: {}
})
任意组件给变量赋值
this.$store.state.title = ‘newTitle‘
this.$store.commit(‘setTitle‘, ‘newTitle‘)
任意组件获取变量的值
console.log(this.$store.state.title)
---恢复内容结束---
以上是关于VUE框架之路由层，仓库层的主要内容，如果未能解决你的问题，请参考以下文章