聊聊Vue3中路由，浅析路由配置方式-Vue.js-PHP中文网

聊聊Vue3中路由，浅析路由配置方式

青灯夜游

发布： 2021-12-21 10:35:02

转载

3521人浏览过

本篇文章带大家了解一下vue3中路由，聊聊路由的基本配置、动态路由的配置、路由模式、路由重定向等，希望对大家有所帮助。

聊聊Vue3中路由，浅析路由配置方式

【相关推荐：《vue.js教程》】

路由的基本配置

1、安装插件

npm install vue-router@next --save

登录后复制

2、创建一个routers.ts文件

3、在routers.ts中引入组件并配置路径。

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

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

export default router;

登录后复制

4、在main.ts中将路由文件挂载到vue身上。

import { createApp } from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import routers from &#39;./routers&#39;;

// createApp(App).mount(&#39;#app&#39;)

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

登录后复制

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#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

命名路由

一般情况

定义路由的时候配置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中文网其它相关文章！