安装和初始化VueRouter

想玩Vue3项目不？用用vuerouter，超好用的！先把它扔进你的项目，跟Vue混熟。咋搞？就主文件那(比如，main.ts或main.js)，用createRouter这玩意儿，瞬间搞出个vuerouter对象。再来就是设置一下历史模式和路由表。然后用createApp这招，搞定一个Vue应用。别忘了，用used插件把新出炉的vuerouter对象加到Vue应用里去。搞定！vuerouter装好了，开玩！

npm install vue-router@next

搞定路由接线之后，赶紧把路由和组件带出来见见大家！咱们给代码里添了个名叫”Home”的路由，肯定得关联到Home组件上。只需在views文件夹下新建个Home.vue文件，用CompositionApi编撰好组件，再导出就大功告成！这几个小步骤，我们的VueRouter应用就轻松搭建完成了！

<pre class='brush:typescript;toolbar:false;’>import { createApp } from ‘vue’
import { createRouter, createWebHistory } from ‘vue-router’
import App from ‘./App.vue’
import Home from ‘./views/Home.vue’
const routes = [
{
path: ‘/’,
name: ‘Home’,
component: Home
}
// 其他路由配置
]
const router = createRouter({
history: createWebHistory(),
routes
})
createApp(App)
.use(router)
.mount(‘#app’)

导航和路由跳转

VueRouter的导航功能超棒，只需给模板加点’to’属性，填上要去的地方就成了，比如添进Home组件后，轻轻一点就能直奔”/about”。

  

    
首页
  


import { defineComponent } from 'vue'
export default defineComponent({
  name: "Home"
})

别只会套用模板导航，VueRouter还有很多新鲜玩法！比如，在组件脚本里敲个router.push(),立马就能实现路由跳转。看看这，我们给goToAbout添加了useRouter,轻松找到了VueRouter的实体，然后随便打个’router.push(‘/about’)，路由就搞定~

动态路由和路由参数

搞懂动态路由和配置参数，这是开发网页必不可少的基本功。比方说，给路径加个:id，比如这个:/user/:id，然后看看props里面的ID有没有弄错。如果没错，那在创建User组件时，就能看见真实的ID~

  

    
首页
    关于我们
  

路由守卫

你只要在路由切换之前做点事儿，比如看看用户登录没，限流什么的呗。这时候，VueRouter的好帮手——路由保镖就得大显身手了。给每个路由都装个保镖，当收到信号后，根据你设定的规则行事，最后再跳一次，搞定！

想要在Vue3+TS+Vite框架中搞定路由？很简单！学点小技巧就行，比如装个插件、配个路由组件、换页、传参数什么的，分分钟能做出时尚的单页应用。这样做不仅能提升你在前端领域的地位，还能让你的项目更有个性！

import { defineComponent } from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: "Home",
  methods: {
    goToAbout() {
      const router = useRouter()
      router.push('/about')
    }
  }
})

别急告诉你个秘诀咋样？想让Vue3+TS+Vite的项目路线路过更溜，直接用VueRouter这个家伙就成！

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
  // 其他路由配置
]
const User = defineComponent({
  name: "User",
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  created() {
    console.log(this.id) // 输出路由参数id的值
  }
})