一：路由跳转
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>
component组件层
<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>
View页面层一
<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>
View页面层二
二：路由传参
（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: {
}
})
store.js
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: {}
})
store.js
任意组件给变量赋值 this.$store.state.title = ‘newTitle‘ this.$store.commit(‘setTitle‘, ‘newTitle‘)
任意组件获取变量的值 console.log(this.$store.state.title)
---恢复内容结束---
原文地址：https://www.cnblogs.com/SR-Program/p/11667227.html
时间： 2024-07-29 18:07:12