安装配置
执行命令npm install vue-router安装
在src下创建router目录,在router目录里面创建index.js
在index.js中写入以下内容
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'//导入页面
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: function () {
return import('../views/AboutView.vue')//所跳转的路由
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router//导出路由
在main.js中导入并使用路由
let app = createApp(App);
app.use(router).mount('#app')
在App.vue中写
<template>
<router-view/><!-- 这是路由出口 -->
</template>
页面跳转及传参
1.标签写法
使用<router-link>跳转,<router-link> 默认会被渲染成一个 `<a>` 标签
<router-link to="/btn">通过to指定链接</router-link>
<router-link :to="{ path:'/btn'} ">根据path跳转</router-link>
<router-link :to="{ name:'user'} ">根据name跳转</router-link>
2. 编程式写法
router.go()、router.push()、router.replace()
router.go()类似于js的history.go(),0刷新,正数前进,负数后退
router.push()在历史堆栈中添加路由,
router.push('/')
router.push({path:'/'})
router.push({name:'home'})
router.replace()替换历史堆栈中当前路由
示例:
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter();
router.push('/home');
}
}
3.动态路由
路径参数 用冒号 : 表示。当一个路由被匹配时,它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来
使用:在路由处配置
{
path:'/about/:id',
name:'about',
component:About
}