vue項目路由的使用

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、其他

1、$route和 $router的區別

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