VUE3 Router路由-蒲公英云

VUE3 Router路由

使用Vue Router可以在不同的组件间切换，根据不同的url地址，路由跳转到不同的组件

提供了俩个路由组件

:用来定义导航，默认会创建标签，根据指定的url路径跳转到组件

:用来渲染url路径对应的组件，将组件显示到当前定义的位置

写一个路由：

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
//配置路由，简单来说就是通过url地址找到组件，一个路径对应一个组件
const routes = [
    //项目打开默认访问的组件
  {
    path: '/',  //url路径，称为根路径
    name: 'Home',  //路由名称，用来唯一标示当前路由，称为命名路由
    component: Home  //对应的组件
  },
  //其他组件都使用懒加载
  {
    path: '/about',
    name: 'About',
    //路由懒加载lazy，提高性能
    component: () => import( '../views/About.vue')
  },
  {
    path:'/user',
    name:'User',
    component: () => import('../views/User.vue')
  }
]
//创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), //has模式
  routes  //路由配置项，上面配置的routes
})
//默认对外提供路由，导出路由
export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
//引入路由
import router from './router'
// createApp(App).use(router).mount('#app')
const app=createApp(App)
app.use(router)
app.mount('#app')

User.vue

<template>
    <div>
        <h1>用户</h1>
    </div>
</template>
<script>
    export default{
    }
</script>
<style>
</style>

App.vue

<template>
  <div id="nav">
    <!--使用<router-link>组件定义导航，to属性：指定链接，即url路径 -->
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/user">User</router-link>
  </div>
  <!-- 
   使用<router-view>组件来渲染url路径对应的组件，将组建显示在当前位置
   -->
  <router-view/>
</template>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

路由的嵌套：

当应用由多层嵌套的组件构成时，需要使用嵌套路由

url路径的定义：
根路径就是/，默认访问项目时显示的就是根路径对应的组件

嵌套的路由的路径
子级路由可以使用相对路径或绝对路径
通配路径
可以使用/:pathMatch(.*)/*来设置当url路径不存在时显示的组件

User.vue

<template>
    <div>
        <h1>用户</h1>
        <p>
            <router-link to="/user/login">用户登录</router-link> |
            <router-link to="/user/register">用户注册</router-link>
        </p>
    </div>
    <router-view></router-view>
</template>
<script>
    export default{
    }
</script>
<style lang="less">
</style>

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
//配置路由，简单来说就是通过url地址找到组件，一个路径对应一个组件
const routes = [
    //项目打开默认访问的组件
  {
    path: '/',  //url路径，称为根路径
    name: 'Home',  //路由名称，用来唯一标示当前路由，称为命名路由
    component: Home  //对应的组件
  },
  //其他组件都使用懒加载
  {
    path: '/about',
    name: 'About',
    //路由懒加载lazy，提高性能
    component: () => import( '../views/About.vue')
  },
  {
    path:'/user',
    name:'User',
    component: () => import('../views/User.vue'),
    children:[
        {
            path:'login',//相对路径（不以/开头），相对于上一层的位置
            name:'login',
            component:() => import('../views/login.vue')
        },
        {
            path:'/user/register', //绝对路径
            name:'register',
            component:() => import('../views/register.vue')
        }
    ]
  },
  //匹配404页面的路由
  {
    path:'/:pathMatch(.*)/*',
    redirect:'/'  //如果匹配的路由不存在，都跳转到根路径
  }
]
//创建路由实例
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL), //has模式
  routes  //路由配置项，上面配置的routes
})
//默认对外提供路由，导出路由
export default router