Vue 路由router

路由

路由是基于hash 和 history 封裝的
  • hash
// 例子
location.hash = 'demo'
  • history
//例子
history.pushState(null,'title','test')

history.back()

history.forward()

history.go(3)
路由在vue中使用流程

ps. 如果在vue create my-project的時(shí)候沒有選擇路由，就手動(dòng)安裝一下。 詳細(xì)見 router 網(wǎng)站

npm install vue-router

router 基礎(chǔ)使用分為以下步驟

1. 在和main.js同級創(chuàng)建router文件夾，一般都是src下同級 下圖

image.png

2. 在router文件下新建index.js文件

  • 這個(gè)是router自動(dòng)指定的目錄，最好不要更改
  • 在main.js引入的時(shí)候直接 '@/router' 即可
路由基礎(chǔ)使用步驟
    1. 在router/index.js文件中導(dǎo)入router相關(guān)包。并且用Vue.use注冊一下
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用router插件
Vue.use(VueRouter);
    1. 聲明使用VueRouter，添加一些相關(guān)配置，并且注冊相關(guān)的組件。
const routes = [
    {
        path : '',
        redirect : "/home"
    },
    {
        path: '/home',
        component: () => import('../views/Home')
    },
    {
        path: '/about',
        component: () => import('../views/About')
    }
];


const router = new VueRouter({
    mode : 'history', //使用history模式
    base: process.env.BASE_URL,
    routes
});
  • 3.將聲明的VueRouter導(dǎo)出
export default router
    1. 在入口main.js文件中導(dǎo)入router/index.js文件。 并且在Vue里注冊
      ps: 因?yàn)関ue-router底層默認(rèn)引用的就是router/index.js文件，所以可以簡寫直接導(dǎo)入到router/目錄即可。
import router from "@/router";

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
  • 上面的就是基礎(chǔ)配置，配置好了就可以使用了。to是對應(yīng)執(zhí)行的路徑。
    <div class="centerText">
      <router-link to="/home">首頁</router-link>
      <router-link to="/about">關(guān)于</router-link>
      <router-link to="/user">用戶</router-link>
    </div>
    <router-view  />

router 一些常用字段

  • to 對應(yīng)路徑。
  • tag 設(shè)置類型。例如: tag="button",就是button樣式

router路徑定義傳參字段

// 可以通過:userId 即可
   {
        path: '/user/:userId/:age',
        name: 'User',
        component: () => import("../views/User.vue")
    }

v-bind:to使用，語法糖 :to

//通過name 進(jìn)行傳參
 <router-link :to="{name: 'User',params: {userId: 'xiaofang',age: 20}}">用戶</router-link>

this.$router常用字段

  • this.$router.push
    描述：跳轉(zhuǎn)到不同的url，但這個(gè)方法回向history棧添加一個(gè)記錄，點(diǎn)擊后退會(huì)返回到上一個(gè)頁面。
//跳轉(zhuǎn)路徑, 等同于 history.pushState() 
this.$router.push('home'); 

 //跳轉(zhuǎn)路徑
this.$router.push({path: '/about'}); 

// 跳轉(zhuǎn)路徑，傳參數(shù)
this.$router.push({name: 'User',params: {userId: "123",age: 20}});
  • this.$router.replace()
    描述：同樣是跳轉(zhuǎn)到指定的url，但是這個(gè)方法不會(huì)向history里面添加新的記錄，點(diǎn)擊返回，會(huì)跳轉(zhuǎn)到上上一個(gè)頁面。上一個(gè)記錄是不存在的。
//替換路徑, 等同于history.replaceState
this.$router.replace('home');
  • this.$router.go(n)
    相對于當(dāng)前頁面向前或向后跳轉(zhuǎn)多少個(gè)頁面,類似 window.history.go(n)。n可為正數(shù)可為負(fù)數(shù)。正數(shù)返回上一個(gè)頁面
//返回上一頁, 相當(dāng)于history.back()
this.$router.go(-1);

// 前進(jìn)一步，等同于history.forward
this.$router.go(1);

// 前進(jìn)3步
this.$router.go(3);

 // 如果history不夠用，就默認(rèn)失敗吧
this.$router.go(-100);
this.$router.go(100);

router接收路由參數(shù)的方法，分 ? 和 : 兩種接收方式
this.$route是路由信息對象

  • ? 形式的參數(shù)使用this.$route.query接收參數(shù)，結(jié)果是一個(gè)對象。
    接收格式為?userId=123&age=20
//1.定義方式。只定義路徑即可。
{
        path: '/about',
        name: 'About',
        component: () => import('../views/About')
}

//2. 傳參方式
 <router-link :to="{name: 'User',query: {userId: userId,age}}">關(guān)于</router-link>

//3. 接收方式
  • : 形式的參數(shù)使用this.$route.params接收參數(shù)，結(jié)果也是一個(gè)對象。
    例如傳參: :to({name: 'User',params: {userId: "123",age: 20}});
    接收格式為 /user/123/20
//1.定義方式
{
        path: '/user/:userId/:age',
        name: 'User',
        component: () => import("../views/User.vue")
}

//2.傳參方式
 <router-link :to="{name: 'User',params: {userId: userId,age}}">用戶</router-link>

//3.接收方式
 <p>接收參數(shù) userId:{{this.$route.params.userId}}  age:{{$route.params.age}}</p>
路由嵌套

開發(fā)中肯定會(huì)遇到路由嵌套的問題，路由嵌套進(jìn)一層精簡了代碼，提高了組件的復(fù)用性，降低了代碼的耦合度。

  • 在路由中定義子路由使用children[]來包含多個(gè)路由，這里要注意的是path不需要添加 / 了
{
        path: '/home',
        name: 'Home',
        children : [
            {
                path: '',
                // name: 'News',
                component : () => import('../components/News')
            },
            {
                path: 'news',
                name: 'News',
                component : () => import('../components/News')
            },
            {
                path: 'message',
                name: 'Message',
                component : () => import('../components/Message')
            }
        ],
        component: () => import('../views/Home')
    }
  • 使用路由嵌套同路由的正常使用一樣。要在對應(yīng)的路由.vue下使用，例如我上面定義的是在Home下的路由，那么路由應(yīng)該寫在Home.vue中
 <p>當(dāng)前為Home.vue頁面</p>
    <div>
      <router-link :to="{name: 'News'}" tag="button">新聞</router-link>
      <router-link :to="{name: 'Message'}" tag="button">消息</router-link>
    </div>
<router-view />
Vue 導(dǎo)航守衛(wèi)

提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航。有多種機(jī)會(huì)植入路由導(dǎo)航過程中：全局的, 單個(gè)路由獨(dú)享的, 或者組件級的。
通俗講，導(dǎo)航守衛(wèi)就是控制路由跳轉(zhuǎn)前，或離開路由后的監(jiān)聽操作

更多路由導(dǎo)航守衛(wèi)使用介紹訪問 官網(wǎng)

  • 組件內(nèi)守衛(wèi),也就是在組件內(nèi)才會(huì)執(zhí)行。
    beforeRouteEnter 守衛(wèi)進(jìn)入組件前調(diào)用
    beforeRouteUpdate 路由改變時(shí)調(diào)用
    beforeRouteLeave 離開該組件時(shí)候調(diào)用
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import News from "@/components/News";
import Message from "@/components/Message";

export default {
  name: 'Home',
  data(){
    return {
      togglePath : null
    }
  }
  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
    console.log("執(zhí)行home的b beforeRouteEnter 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建");
    next()
  },
  beforeRouteUpdate(to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來說，對于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問組件實(shí)例 `this`
    console.log("執(zhí)行home的b beforeRouteUpdate 因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。");
    next()
  },
  beforeRouteLeave(to, from, next) {
    // 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
    // 可以訪問組件實(shí)例 `this`
    this.togglePath = this.$route.path
    console.log("執(zhí)行home的b beforeRouteLeave 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用。"+to.path+"\t"+from.path+"\t"+this.$route.path);
    next()
  },

}
</script>
keep-alive

keep-alive 是 Vue 內(nèi)置的一個(gè)組件，可以使被包含的組件保留狀態(tài)，或避免重新渲染。 不會(huì)進(jìn)入離開每次都執(zhí)行創(chuàng)建和銷毀。

更多動(dòng)態(tài)組件 & 異步組件使用見 官網(wǎng)

  • 基礎(chǔ)使用
<keep-alive>
  <component>
    <!-- 該組件將被緩存！ -->
  </component>
</keep-alive>
  • 過濾路徑
<keep-alive include="abc">
  <component>
    <!-- name 為 abc 的組件將被緩存！ -->
  </component>
</keep-alive>
<keep-alive exclude="demo">
  <component>
    <!-- 除了 name 為 demo 的組件都將被緩存！ -->
  </component>
</keep-alive>
  • 如果想某個(gè)路徑網(wǎng)址被緩存，在router 里 增加 meta 屬性。其中keepAlive為true表示緩存。
const routes = [
    {
        path: '/about',
        name: 'About',
        meta: {
            keepAlive: true //about路徑 需要緩存
        },
        component: () => import('../views/About')
    },
    {
        path: '/user/:userId/:age',
        name: 'User',
        meta: {
            keepAlive: false //user路徑 不需要緩存
        },
        component: () => import("../views/User.vue")
    }
];
  • 需求：
    默認(rèn)顯示 A
    B 跳到 A，A 不刷新
    C 跳到 A，A 刷新
    實(shí)現(xiàn)方式
//在 A 路由里面設(shè)置 meta 屬性：
{
        path: '/',
        name: 'A',
        component: A,
        meta: {
            keepAlive: true // 需要被緩存
        }
}
//在 B 組件里面設(shè)置 beforeRouteLeave：
export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
             // 設(shè)置下一個(gè)路由的 meta
            to.meta.keepAlive = true;  // 讓 A 緩存，即不刷新
            next();
        }
};
//在 C 組件里面設(shè)置 beforeRouteLeave：
export default {
        data() {
            return {};
        },
        methods: {},
        beforeRouteLeave(to, from, next) {
            // 設(shè)置下一個(gè)路由的 meta
            to.meta.keepAlive = false; // 讓 A 不緩存，即刷新
            next();
        }
};
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Vue Router 是Vue.js[http://cn.vuejs.org/]官方的路由管理器。它和 Vue.j...
    SY閱讀 770評論 0贊 0
  • SEO：搜索引擎優(yōu)化，前端路由：控制頁面訪問路徑，單頁面應(yīng)用后端路由：控制接口 一，實(shí)現(xiàn)前端路由的兩種方式： 1，...
    FD__f392閱讀 1,580評論 0贊 1
  • 一. 概述 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，讓構(gòu)建單...
    任未然閱讀 315評論 0贊 0
  • Vue Router簡介 它是一個(gè)Vue.js官方提供的路由管理器。是一個(gè)功能更加強(qiáng)大的前端路由器，推薦使用。Vu...
    王玉偉的偉閱讀 382評論 0贊 0
  • 本文面向純粹的vue路由小白，采用 head first的文風(fēng)，重點(diǎn)在于解釋清楚vue路由的基本形象，傳達(dá)路由的設(shè)...
    水永舟亢閱讀 2,344評論 1贊 8

友情鏈接更多精彩內(nèi)容