Vue-router的安装配置

 安装配置
执行命令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
    }