Vue-Router实现路由跳转

1、官方指导文件

1、官方指导文件客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。

2、如何定义一个新的路由

1）引入相关的组件

import HomeView from '../views/Home.vue'
import Test from '../views/Test.vue'

2）设置routers

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },{
      path:"/test",
      name:'Test',
      component:Test

    }
  ]
})

router数组中每一个元素都是一个路由

path是路径；name是路由名字；component:路由对应的组件。

注意！！

component的名字一定要和引入的组件名一致。例如import (name) from ......,component:(name),这两个name一定要一样，不然没用,而且name不能重复。

router中还有redirect这个参数，这个参数是用来重定向的，当浏览器访问同数组中path路由时，浏览器会自动重定向到redirect的路径。

3）向外暴露

export default router

一定要向外暴露，不然无法生效 

3、在main.js里使用路由

1）引入

import router from './router'

 2）使用

app.use(router)

注意事项：

<RouterView/>标签是非常重要的，路由的组件需要渲染在哪里就要放在哪里！！！！！