VUE3 Router路由

Posted 2021-09-07 月疯

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

提供了俩个路由组件

<router-link>:用来定义导航，默认会创建<a>标签，根据指定的url路径跳转到组件
<router-view> :用来渲染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