一、Vue3路由配置
Vue3路由的配置和Vue2基本相同。在Vue3的项目中,我们需要先安装Vue-Router。可以使用npm命令进行安装:
npm i vue-router@next
接下来,在main.js中引入Vue-Router:
import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';
const routes = [
// 定义路由
{path: '/', component: Home},
{path: '/about', component: About},
{path: '/contact', component: Contact}
];
// 创建路由实例
const router = createRouter({
history: createWebHashHistory(),
routes, // 使用`routes`配置选项定义路由
});
const app = createApp(App);
app.use(router); // 使用路由
app.mount('#app');
二、Vue2和Vue3路由区别
Vue3路由相较于Vue2来说最大的变化就是在引入路由实例的方式上。在Vue2中我们使用如下方法:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes:[]
})
而在Vue3中,我们使用的是createRouter:
import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';
const router = createRouter({
history: createWebHashHistory(),
routes, // 使用`routes`配置选项定义路由
});
其中,history的选项要注意,Vue2是通过mode来配置
三、Vue3路由参数
在Vue3中,我们可以在声明路由时使用props属性设置组件参数。例如:
const routes = [
// 定义路由
{path: '/user/:id', component: User, props: true}, // 传递路由参数
];
然后,在组件中,我们通过props来接受路由参数。例如:
const User = {
props: ['id'], // 接收params传递的参数
template: '<div>UserId: {{id}}</div>'
}
四、Vue3路由配置公共页面和跳转页面
在Vue3中,通常会有一些公共页面,例如header,footer等重复出现在多个页面中的元素,我们可以使用layout来定义。例如:
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
name: 'Layout',
component: Layout,
children: [
{
path: '',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
},
{
path: '/contact',
name: 'Contact',
component: Contact
}
]
})
在上面的代码中,我们定义了一个Layout组件,Home和About共用这个Layout组件。Contact是独立的页面。在Layout中,我们可以定义一些公共的元素,如header和footer,同时,通过children属性可以定义子路由。
在跳转页面时,我们可以使用router-link来实现,例如:
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-link to="/contact">Contact</router-link>
五、Vue3子路由配置
在Vue3中,子路由的定义也和Vue2基本相同。例如:
const routes = [
{
path: '/user',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
在上面的代码中,我们定义了一个/user路由,它包含了两个子路由。然后在User组件中,我们可以使用<router-view>来显示子路由的内容:
<div>
<h2>User Page</h2>
<router-link to="/user/profile">Profile</router-link>
<router-link to="/user/posts">Posts</router-link>
<router-view/>
</div>
六、Vue3动态路由讲解
在Vue3中,我们可以使用动态路由,例如:
const routes = [
{ path: '/user/:id', component: User },
]
在上面的代码中,我们使用了:id来代表了一个动态的路由,它可以匹配到任何/user/后面的路径,并将路径保存到$route.params.id中。
七、Vue3配置子路由关键字
在Vue3中,我们可以使用一个新的关键字来配置子路由,即:children。例如:
const routes = [
{
path: '/user',
component: User,
children: [
{
path: '',
component: UserHome
},
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}
]
在上面的代码中,我们使用了children来配置/user路由的子路由,其中,''表示默认路由,也就是/user的首页。在User组件中,我们可以使用不同的子路由来使用<router-view>来显示。
八、Vue3路由缓存
在Vue3中,我们可以使用keep-alive标签来实现路由缓存。例如:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
在上面的代码中,我们使用$router.meta.keepAlive属性来判断当前路由是否需要缓存。如果需要缓存,就使用<keep-alive>来包装。
关于Vue3路由的更多内容可以参考Vue官方文档中的路由部分:https://v3.cn.vuejs.org/guide/routing.html