首頁 >web前端 >Vue.js >聊聊Vue3中路由,淺析路由配置方式

聊聊Vue3中路由,淺析路由配置方式

青灯夜游
青灯夜游轉載
2021-12-21 10:35:023813瀏覽

這篇文章帶大家了解Vue3中路由,聊聊路由的基本設定、動態路由的設定、路由模式、路由重新導向等,希望對大家有幫助。

聊聊Vue3中路由,淺析路由配置方式

【相關推薦:《vue.js教學》】

路由的基本設定

#1、安裝外掛程式

npm install vue-router@next --save

2、建立一個routers.ts檔案

3、在routers.ts中引入元件並配置路徑。

import { createRouter,createWebHashHistory } from 'vue-router';
// 引入组件
import Home from './components/Home.vue';
import News from './components/News.vue';
import User from './components/User.vue';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {path: '/', component: Home},
    {path: '/news', component: News},
    {path: '/user', component: User},
  ]
})

export default router;

4、在main.ts中將路由檔案掛載到vue身上。

import { createApp } from 'vue'
import App from './App.vue'
import routers from './routers';

// createApp(App).mount('#app')

const app = createApp(App);
app.use(routers);
app.mount('#app');

5、用到路由的元件通過router-view元件或router-link

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <ul>
    <li>
      <router-link to="/">首页</router-link>
    </li>
    <li>
      <router-link to="/news">新闻</router-link>
    </li>
    <li>
      <router-link to="/user">用户</router-link>
    </li>
  </ul>

  <router-view></router-view>
</template>

掛載router-link後,只需要在元件對應的頁面路徑上輸入指定路由即可完成跳轉,router-link則實現a標籤進行跳轉的形式路由。

動態路由的設定

在routes.ts中依照下面的方式進行設定路由,透過/:aid的方式來進行動態路由的設定。

//配置路由
const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: &#39;/&#39;, component: Home , alias: &#39;/home&#39; },
        { path: &#39;/news&#39;, component: News },
        { path: &#39;/user&#39;, component: User },
        { path: &#39;/newscontent/:aid&#39;, component: NewsContent },
    ], 
})

透過router-link進行跳轉的時候,需要模板字串和冒號+to。

<ul>
    <li v-for="(item, index) in list" :key="index">
        <router-link  :to="`/newscontent/${index}`"> {{item}}</router-link>
    </li>
</ul>

透過this.$route.params取得動態路由傳過來的值。

mounted(){
    // this.$route.params 获取动态路由的传值
    console.log(this.$route.params)
}

如果我們想要實作類似與GET傳值,我們可以透過下面的方式

1、將路由配置為普通路由。

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        { path: &#39;/&#39;, component: Home , alias: &#39;/home&#39; },
        { path: &#39;/news&#39;, component: News },
        { path: &#39;/user&#39;, component: User },
        { path: &#39;/newscontent&#39;, component: NewsContent },
    ], 
})

2、router-link透過問號的形式進行跳躍。

<router-link  :to="`/newscontent?aid=${index}`"> {{item}}</router-link>

3、透過this.$route.query取得到get傳值。

console.log(this.$route.query);

路由編程式導覽(JS跳轉路由)

只需要透過this.$router.push進行指定即可。

  this.$router.push({
    path: &#39;/home&#39;
  })

如果想要實作get傳值,可以透過下列的方式。

this.$router.push({
    path: &#39;/home&#39;,
    query: {aid: 14}
  })
}

動態路由需要使用下面的這種方式。

  this.$router.push({
    path: &#39;/home/123&#39;,
    // query: {aid: 14}
  })

路由模式

Hash模式

#Hash模式的典型特點是頁面路由中含有一個井號。

const router = createRouter({

    history: createWebHashHistory(),
    routes: [
        ...,
    ], 
})

HTML5 history模式

  • #引入createWebHistory。

  • router的設定項目中的history屬性設定為createWebHistory()。

import { createRouter, createWebHistory } from &#39;vue-router&#39;

//配置路由
const router = createRouter({
    history: createWebHistory(),
    routes: [
        ...
    ], 
})

注意:開啟HTML5 History模式之後,發佈到伺服器需要設定偽靜態。

配置偽靜態的方法:

https://router.vuejs.org/zh/guide/essentials/history-mode.html#後端設定範例

#命名路由

一般情況

  • #定義路由的時候設定name屬性

  • ##
    { path: &#39;/news&#39;, component: News,name:"news" }
  • 傳入物件進行跳轉

  • <router-link :to="{name: &#39;news&#39;}">新闻</router-link>

#透過GET傳值的方式

    ##定義路由的時候配置name屬性
  • { path: &#39;/newscontent&#39;, component: NewsContent, name: "content" },
    傳入包含query的物件
  • <li v-for="(item, index) in list" :key="index">
        <router-link  :to="{name: &#39;content&#39;,query: {aid: index}}"> {{item}}</router-link>
    </li>
透過動態路由的方式

    定義動態路由並指定name屬性
  • #
    { path: &#39;/userinfo/:id&#39;, name: "userinfo", component: UserInfo }
##傳入包含params的對象
  • <router-link :to="{name: &#39;userinfo&#39;,params: {id: 123}}">跳转到用户详情</router-link>

  • 編程式路由

#和上面的方式很類似。

<button @click="this.$router.push({name: &#39;userinfo&#39;,params: {id: 666}})">点击跳转</button>

路由重定向

{ path: &#39;&#39;, redirect: "/home" },   // 路由重定向
{ path: &#39;/home&#39;, component: Home },
路由別名

下面的這個實例中,存取people這個路由和存取alias這個路由是一致的。

{ path: &#39;/user&#39;, component: User, alias: &#39;/people&#39; }

alias也可以是一個陣列。
{ path: &#39;/user&#39;, component: User, alias: [&#39;/people&#39;,&#39;/u&#39;]}

動態路由的形式。
{ path: &#39;/userinfo/:id&#39;, name: "userinfo", component: UserInfo, alias: &#39;/u/:id&#39; }

巢狀路由

巢狀路由的應用程式場景一般在導覽列上。

定義巢狀路由
  • {
      path: &#39;/user&#39;, component: User,
      children: [
        { path: &#39;&#39;, redirect: "/user/userlist" },
        { path: &#39;userlist&#39;, component: UserList },
        { path: &#39;useradd&#39;, component: UserAdd }
      ]
    }

router-link與router-view搭配顯示內容
  • <div class="left">
      <ul>
        <li>
          <router-link to="/user/userlist">用户列表</router-link>
        </li>
        <li>
          <router-link to="/user/useradd">增加用户</router-link>
        </li>
      </ul>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>

    更多程式相關知識,請造訪:
  • 程式設計入門
! !

以上是聊聊Vue3中路由,淺析路由配置方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除