vue項目vue-router的使用

1、路由的基礎配置

//需要在main.js文件內引入,具體可以查看我的另一篇關於main.js設置的文章

https://blog.csdn.net/weixin_44258964/article/details/105835057

以下配置主要是單獨路由文件的配置
引入vue-router插件並使用
路由下主要分兩種模式，具體可以看第二部分內容
路由是有路徑（path）、名稱（name）、組件（component）組成的
映射組件可有多種方式去處理，具體可以看以下代碼

//路由的實現原理其實就是動態加載不同組件
import Vue from 'vue'
import VueRouter from 'vue-router’
//路徑引入
import HelloWorld from '@/components/HelloWorld'
vue.use(VueRouter)
const router = new VueRouter({
mode: 'history’,//模式配置
routes: [
{
    path: '/‘,//指定當前匹配的路徑
    name: 'HelloWorld’,//路由名字
//webpack在打包的時候會把整個路由打包成一個js文件，如果頁面一多，會導致這個文件非常大，加載緩慢
    component: HelloWorld//映射的組件
    //也可使用以下方式去註冊，不需要提前引入該路徑了，且實現懶加載，webpack會把每個路由都打包一個js，例如1.js\2.js這樣的，在請求到該頁面的時候纔去加載這個頁面js，
    //component: (resolve) => require(['@/views/tsTest'], resolve)
},
{
//配置動態id，使用$route.params.id獲取動態
    path: '/router_test/:id',//路由傳參
    name: 'routerTest',
    component: (resolve) => require(['@/views/routerTest.vue'], resolve)
},
 // 增加重定向，沒有的路徑自動跳轉到首頁
    {
      path: '*',
      redirect: '/'
    },
]
export default router

2、路由的兩種模式

vue項目默認是hash模式
1、hash：就是常說的錨點（#），js通過hashChange事件監聽url做的改變，ie7一下需要輪詢
2、history ：可以使url像普通網站以一樣用’/’分割，但是頁面並沒有跳轉，需要服務端的支持

使用history模式，需要獲取服務端的支持，以下是history配置

//第一種
//page.json文件裏面配置
"scripts": { "dev": "webpack-dev-server --env.dev --history-api-fallback” }
//第二種
//webpack.config.js文件裏面配置
devServer: {
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
}
},
//所有路由都會指向index.html

3、關於router的使用

一、使用內置的組件，默認會渲染成一個標籤

<router-link to=“/“ tag=“li” replace></router-link>
//to是一個prop，指定需要跳轉的路徑
//replace不會留下History的記錄，故不能使用導航後退一步返回上一個頁面

二、可以在js裏面進行的方式

1.this.$router.push() 等同於
描述：跳轉到不同的url，但這個方法會向history棧添加一個記錄，點擊後退會返回到上一個頁面。
用法：

this.$router.push(‘home’)
this.$router.push({path:‘home’})
//路由傳參數，但不會顯示在url裏
this.$router.push({name:’aaa’,params:{id:4}})
//通過this.$route.params.id獲取
//帶查詢參數，會顯示在url上/aaa?id=4
this.$router.push({path:’aaa’,query:{id:4}})
//通過this.$route.query.id獲取
*****path和params搭配不會生效****

2.this.$router.replace()
描述：同樣是跳轉到指定的url，但是這個方法不會向history裏面添加新的記錄

點擊返回，會跳轉到上上一個頁面。上一個記錄是不存在的。

3.this.$router.go(n)

相對於當前頁面向前或向後跳轉多少個頁面,類似 window.history.go(n)。n可爲正數可爲負數。正數返回上一個頁面
瀏覽器中前進一步，等同於history.forward()、
this.$router.go(1)
瀏覽器中後退一步，等同於history.back()、
this.$router.go(-1),如果參數太大或太小就失敗

4、路由的高級設置使用

設置頁面標題（js使用window.document.title去設置標題），router使用導航鉤子統一配置
在router配置裏面加上meta屬性

{
    path: '/‘,//指定當前匹配的路徑
    component: (resolve) => require(['@/views/tsTest'], resolve),
    meta: {
        title: '路由使用'
    }
},

再配合鉤子做統一處理，meta裏面的對象可以自定義，故可以做很多全局設置的事，比如根據token屬性判斷頁面是否登錄

/*在跳轉之前執行*/
router.beforeEach((to, from, next) => {
    window.document.title = to.meta.title
    next();//必須有!否則頁面就會顯示空白
})
//三個參數
To:即將進入的目標的路由對象
from：當前導航即將要離開的路由對象
next：調用該方法後，方可進入下一個鉤子；next()可以設置參數，根據參數去到不同頁面
router.afterEach((to, from, next) => {
    Console.log(’跳轉之後執行’)
    Next()//可以省略
})

5、嵌套路由的使用

有時候我們會需要再某個頁面裏面加載頁面的內容，這時候可以使用嵌套路由

//路由
{
path: '/shouye',
name: 'HelloWorld',
component: HelloWorld,
meta: {
title: '首頁'
},
children: [{
path: '/router_view_page',
name: 'routerViewTest',
component: () => import('@/views/test/routerViewTest.vue'),
meta: {
title: 'routerView測試頁面'
}
}]
},
//使用方法
//點擊觸發之後顯示嵌套內容
<router-link to="/router_view_page">嵌套組件</router-link>
<router-view></router-view>

6、其他

1、$route和 $router的區別

傳值使用 $route
跳轉使用 $router

7、路由相關問題複習鞏固

vue-router怎麼重定向頁面？

// 增加重定向，沒有的路徑自動跳轉到首頁
    {
      path: '*',
      redirect: '/'
    },

vue-router怎麼配置404頁面？

{
    path: '*',
    component: ‘404頁面組件'
},

切換路由時，需要保存草稿的功能，怎麼實現呢？
使用keep-live 不明白看這個 https://segmentfault.com/a/1190000011978825
vue-router路由有幾種模式？說說它們的區別？
模式介紹上面有詳細內容
vue-router有哪幾種導航鉤子（導航守衛）？
全局鉤子 router.beforeEach 和router.afterEach
單個路由鉤子寫在路由裏的 beforeEnter
組件內鉤子：

beforeRouteEnter(to, from, next) {
    // do someting
    // 在渲染該組件的對應路由被 confirm 前調用
},
beforeRouteUpdate(to, from, next) {
    // do someting
    // 在當前路由改變，但是依然渲染該組件時調用
},
beforeRouteLeave(to, from ,next) {
    // do someting
    // 導航離開該組件的對應路由時被調用
}

全局解析守衛
router.beforeResolve 註冊一個全局守衛，和 router.beforeEach 類似，

說說你對router-link的瞭解
組件形式的路由跳轉
active-class exact-active-class是匹配後的class樣式
屬性To代表跳轉的鏈接
屬性tag代表該組件渲染出來的標籤樣式
屬性replace也是表示跳轉，但是不會存儲在history裏面
vue-router如何響應路由參數的變化？
動態設置例如屬性
path:’/lujin/:id’
以上路徑id即動態的，利用 $route.params.id可以獲取在路由跳轉的時候設置對象query例如 This.$ router.push({path:’/lujin’,query:{id:122}})
通過this.$route.query.id可以獲取，同上params也可如此設置
你有看過vue-router的源碼嗎？說說看
沒有！！！！
切換到新路由時，頁面要滾動到頂部或保持原先的滾動位置怎麼做呢？
使用router.beforeEach,設置頁面滾動位置window.scrollTo(0,0);
在什麼場景下會用到嵌套路由？
二級菜單
如何獲取路由傳過來的參數？
$route.query.參數名字||$ route.params.參數名字
說說active-class是哪個組件的屬性？
在vue組件中怎麼獲取到當前的路由信息？
this. $router是路由實例，this.$ route是路由信息
vur-router怎麼重定向？
通過設置redirect
怎樣動態加載路由？
！！！！router的 addroutes方法，暫時不知道怎麼使用

怎麼實現路由懶加載呢？
() => import(’@/views/login/index’)

如果讓你從零開始寫一個vue路由，說說你的思路
先創建路由實例，然後註冊
配置路由模式
配置頁面
路由配置，配置404的頁面
說說vue-router完整的導航解析流程是什麼？
導航被觸發。
在失活的組件裏調用離開守衛。
調用全局的 beforeEach 守衛。
在重用的組件裏調用 beforeRouteUpdate 守衛
在路由配置裏調用 beforeEnter。
解析異步路由組件。
在被激活的組件裏調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。
路由之間是怎麼跳轉的？有哪些方式？
router-link、$router.push|go|replace
如果vue-router使用history模式，部署時要注意什麼？
需要配置上面有講
route和router有什麼區別？
$route一個是路由信息,一般用於獲取路由參數什麼的，$router一個是路由實例，用於跳轉什麼的
vue-router鉤子函數有哪些？都有哪些參數？
全局鉤子、單個路由裏的鉤子、組件鉤子
vue-router是用來做什麼的？它有哪些組件？
是一個路由插件，用來設置路由跳轉的，router-link、router-view、

vue項目vue-router的使用

1、路由的基礎配置

2、路由的兩種模式

3、關於router的使用

4、路由的高級設置使用

5、嵌套路由的使用

6、其他

7、路由相關問題複習鞏固

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

彈窗點擊透明部分隱藏（陰影部分隱藏）

前端工程化的理解整理

vue項目之build文件、config文件配置--vue項目打包構建相關

vue項目vue-router的使用

axios.js文件使用router跳轉的幾種方式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結