1.解决传参不刷新方式：
App.vue 界面
<template>
<div id="app">
<nav>
<button @click="goAbout">跳转about</button> |
<button @click="goVip">跳转vip</button> |
</nav>
<router-view />
</div>
</template>
<script>
export default {
name: "App",
methods: {
goAbout() {
/* 动态路由的方式 id传过去是数字类型 刷新之后是字符串类型 */
/* ▲不采用动态路由的方式 第一次id是可以发送出去的是数字类型
★但是采用params的方式一刷新值就消失了 */
this.$router.push({
/* 用params传值,只能采用name方式不能采用path,否则id就传不过去 */
/* params 传参 参数不会在地址栏展示出来 */
name: "aboutpage",
params: {
id: 1000,
},
});
/* 如果不采用动态路由的方式 想刷新还存在就使用本地缓存的方式 */
},
goVip() {
/* id传过去是数字类型刷新之后是字符串类型 */
/* 采用query的方式传参好在刷新之后值不会消失 */
/* query 传参可以使用path的方式 params不可以 */
/* 使用query传参 参数是会在地址栏明文展示出来 */
this.$router.push({
path: "/vip",
query: {
id: 2000,
},
});
},
AboutPage.vue界面
<template>
<div>
<h1>我是AbouPage</h1>
</div>
</template>
<script>
export default {
name:"AboutPage",
created(){
/* 第一次拿到id的时候 就存在本地缓存中 */
if(this.$route.params.id){
localStorage.id = this.$route.params.id
}
/* 如果刷新页面this.$route.params.id的值为undefined 则为false
就取本地缓存中的id的值 */
let id = this.$route.params.id||localStorage.id
console.log(id);
},
}
VipPage.vue界面：
<template>
<div>
<h1>
我是VipPage
</h1>
</div>
</template>
<script>
export default {
name:"VipPage",
created() {
console.log(this.$route.query.id);
},
}
2.刷新跳转替换：
<template>
<div>
<h1>我是AbouPage</h1>
<router-link to="/vip">跳转到vip</router-link>
<a @click="goBack" href="javascript:;">返回上一页</a> |
<a @click="goReload" href="javascript:;">刷新</a> |
<a @click="goNext" href="javascript:;">返回下一页</a> |
<a @click="goReplace" href="javascript:;">替换当前页</a> |
</div>
</template>
<script>
export default {
name:"AboutPage",
created(){
/* 第一次拿到id的时候 就存在本地缓存中 */
if(this.$route.params.id){
localStorage.id = this.$route.params.id
}
/* 如果刷新页面this.$route.params.id的值为undefined 则为false
就取本地缓存中的id的值 */
let id = this.$route.params.id||localStorage.id
console.log(id);
},
methods:{
/* 返回上一页 */
/* 第一种方法 */
goBack(){
/* this.$router.back() */
/* 第二种方法 */
this.$router.go(-1)
},
goReload(){
/* 刷新当前页面 */
this.$router.go(0)
},
goNext(){
/* 去下一页 */
/* this.$router.go(1) */
this.$router.forward()
},
goReplace(){
/* 替换当前页为vip页面 */
/* 把页面销毁了，自己取而代之 */
this.$router.replace('/vip')
}
}
}
</script>
<style>
</style>
3.钩子函数案例：
App.vue界面：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<button @click="goAbout">跳转about</button> |
<button @click="goVip">跳转vip</button> |
<button @click="goVip1">跳转vip----params001</button> |
<button @click="goVip2">跳转vip----params002</button> |
<button @click="goVip3">跳转vip----params003</button> |
<router-link to="/meta">路由原信息页面</router-link> |
</nav>
<router-view />
</div>
</template>
<script>
export default {
name: "App",
methods: {
goAbout() {
/* 动态路由的方式 id传过去是数字类型 刷新之后是字符串类型 */
/* ▲不采用动态路由的方式 第一次id是可以发送出去的是数字类型
★但是采用params的方式一刷新值就消失了 */
this.$router.push({
/* 用params传值,只能采用name方式不能采用path,否则id就传不过去 */
/* params 传参 参数不会在地址栏展示出来 */
name: "aboutpage",
params: {
id: 1000,
},
});
/* 如果不采用动态路由的方式 想刷新还存在就使用本地缓存的方式 */
},
goVip() {
/* id传过去是数字类型刷新之后是字符串类型 */
/* 采用query的方式传参好在刷新之后值不会消失 */
/* query 传参可以使用path的方式 params不可以 */
/* 使用query传参 参数是会在地址栏明文展示出来 */
this.$router.push({
path: "/vip",
query: {
id: 2000,
},
});
},
goVip1() {
this.$router.push({
name: "vippage",
query: {
id: 1,
},
});
},
goVip2() {
this.$router.push({
name: "vippage",
query: {
id: 2,
},
});
},
goVip3() {
this.$router.push({
name: "vippage",
query: {
id: 3,
},
});
},
},
};
</script>
VipPage.vue界面：
<template>
<div>
<h1>
我是VipPage
</h1>
</div>
</template>
<script>
export default {
name:"VipPage",
created() {
console.log(this.$route.query.id);
},
/* 既然写了组件内的钩子函数 里面next()方法必须执行一次 */
/* 已进入组件立即执行 */
beforeRouteEnter(to,from,next){
console.log('进入vip页面')
console.log('to',to);
/* 守卫执行前 组件实例还没被创建 */
console.log(this);
/* 怎么获取this呢 */
next(vm=>{
console.log('vm',vm.$route.query.id);
})
console.log('from',from);
/* next(); */
alert('欢迎光临请充值')
},
/* 当query 传参的时候 参数的值发生了变化也会执行 组件路由更新钩子函数
query传参 类似于get请求 */
/* ★ params传参的时候是不会触发组件路由更新钩子函数的 */
beforeRouteUpdate(to,from,next){
console.log('更新vip页面');
console.log('to',to);
console.log('from',from);
/* 在 beforeRouteUpdate 组件实例已生成可以获取到this*/
console.log(this);
/* 在这里不可以使用this.$route.query.id
因为会获取之前的id不是跳转后的id */
let id = to.query.id
if(id==1){
alert('买本vue')
}
if(id==2){
alert('买本js')
}
if(id==3){
alert('买本react')
}
next()
},
/* 离开组件立即执行 */
beforeRouteLeave(to,from,next){
console.log('离开vip页面');
console.log('to',to);
console.log('from',from);
/* 当你要离开vip页面的时候
弹出confirm提示: 判断 点击确定 则跳转 取消则不跳转*/
/* next(false) 值为false 表示阻止路由跳转 */
/* next(true) */
if(confirm('您不再充钱了嘛')){
next(true)
}else{
next(false)
}
},
}
</script>
<style>
</style>
4.路由元信息：
在router下的index.js配置路由元信息：
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},{
path:'/AboutPage',
name:'aboutpage',
component:()=>import('@/views/AboutPage.vue'),
/* 局部路由钩子 */
beforeEnter: (to, from, next) => {
console.log(to);
console.log(from);
next()
}
{
path:'/meta',
name:'metapage',
component:()=>import('@/views/MetaPage.vue'),
meta:{
title:'路由元信息',
flag:true
}
}
]
MetaPage.vue文件：
<template>
<div>
<h1>MetaPage</h1>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
name:"MetaPage",
data(){
return{
msg:'',
}
},
created(){
document.title = this.$route.meta.title
console.log(this.$route);
/* 路由元信息里面设置flag 如果flag 是true 则页面显示您是管理员
否则显示您是 普通用户 */
if(this.$route.meta.flag==true){
this.msg = '您是管理员'
}else{
this.msg = '您是普通用户请充钱'
}
}
}
</script>
<style>
</style>
左侧文件目录：
