VUE3 Router路由

谁践踏了优雅 2022-09-07 09:49 363阅读 0赞

> 使用Vue Router可以在不同的组件间切换，根据不同的url地址，路由跳转到不同的组件
> 
> 提供了俩个路由组件
> 
> <router-link>:用来定义导航，默认会创建<a>标签，根据指定的url路径跳转到组件  
> <router-view> :用来渲染url路径对应的组件，将组件显示到当前定义的位置

![20210823010458966.png][]

写一个路由：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70][]

index.js

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="/">Home</router-link> |
        <router-link to="/about">About</router-link> |
    	<router-link to="/user">User</router-link>
      </div>
      
      <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>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 1][]

路由的嵌套：

> 当应用由多层嵌套的组件构成时，需要使用嵌套路由
> 
> url路径的定义：  
> 根路径就是/，默认访问项目时显示的就是根路径对应的组件
> 
> 嵌套的路由的路径  
> 子级路由可以使用相对路径或绝对路径  
> 通配路径  
> 可以使用/:pathMatch(.\*)/\*来设置当url路径不存在时显示的组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 2][]

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

![20210823012634744.gif][]

[20210823010458966.png]: /images/20220829/9ea93291dbc64c40b55bb3cc23ed422c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70]: /images/20220829/19c204e93aaa4e91b1237da51014f760.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 1]: /images/20220829/0c6b2a3ad3b849fabc2cd937ff7bcfd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWhlYzIwMTA_size_16_color_FFFFFF_t_70 2]: /images/20220829/e816c01a740040b7bcc25bcd615537a6.png
[20210823012634744.gif]: /images/20220829/f92f569d91864316bc436057bfa05ccf.png