Vue3中路由和路由配置方式的示例分析

這篇文章給大家分享的是有關Vue3中路由和路由配置方式的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

路由的基本配置

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: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent/:aid', 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: '/', component: Home , alias: '/home' },
        { path: '/news', component: News },
        { path: '/user', component: User },
        { path: '/newscontent', 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: '/home'
  })

如果想要實現get傳值，可以通過下列的方式。

this.$router.push({
    path: '/home',
    query: {aid: 14}
  })
}

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

  this.$router.push({
    path: '/home/123',
    // query: {aid: 14}
  })

路由模式

Hash模式

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

const router = createRouter({

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

HTML5 history模式

• 引入createWebHistory。

• router的配置項中的history屬性設置為createWebHistory()。

import { createRouter, createWebHistory } from 'vue-router'

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

注意：開啟HTML5 History模式之后，發布到服務器需要配置偽靜態。

配置偽靜態的方法：

https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

命名路由

一般情況

• 定義路由的時候配置name屬性

{ path: '/news', component: News,name:"news" }

• 傳入對象進行跳轉

<router-link :to="{name: 'news'}">新聞</router-link>

通過GET傳值的方式

• 定義路由的時候配置name屬性

{ path: '/newscontent', component: NewsContent, name: "content" },

• 傳入包括query的對象

<li v-for="(item, index) in list" :key="index">
    <router-link  :to="{name: 'content',query: {aid: index}}"> {{item}}</router-link>
</li>

通過動態路由的方式

• 定義動態路由并指定name屬性

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo }

• 傳入包括params的對象

<router-link :to="{name: 'userinfo',params: {id: 123}}">跳轉到用戶詳情</router-link>

編程式路由

和上面的方式很類似。

<button @click="this.$router.push({name: 'userinfo',params: {id: 666}})">點擊跳轉</button>

路由重定向

{ path: '', redirect: "/home" },   // 路由重定向
{ path: '/home', component: Home },

路由別名

下面的這個實例中，訪問people這個路由和訪問alias這個路由是一致的。

{ path: '/user', component: User, alias: '/people' }

alias也可以是一個數組。

{ path: '/user', component: User, alias: ['/people','/u']}

動態路由的形式。

{ path: '/userinfo/:id', name: "userinfo", component: UserInfo, alias: '/u/:id' }

嵌套路由

嵌套路由的應用場景一般在導航欄上。

• 定義嵌套路由

{
  path: '/user', component: User,
  children: [
    { path: '', redirect: "/user/userlist" },
    { path: 'userlist', component: UserList },
    { path: 'useradd', 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中路由和路由配置方式的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！