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>
左側文件目錄：
