Vue-Router

Vue-Router

Vue路由vue-router是官方的路由插件，能够轻松的管理 SPA 项目中组件的切换。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来

vue-router 目前有 3.x 的版本和 4.x 的版本，vue-router 3.x 只能结合 vue2 进行使用，vue-router 4.x 只能结合 vue3 进行使用

安装：npm install vue-router@3/4

快速上手

在router/index.js初始化router

import VueRouter from "vue-router";
import Vue from "vue";
import Book from "@/components/Book";
import Music from "@/components/Music";

// 将VueRouter设置为Vue的插件
Vue.use(VueRouter)

const router = new VueRouter({
    routes: [
        {path:'/book', component: Book},
        {path:'/music', component: Music},
    ]
})

export default router

在main.js中导入router

import router from "@/router";
new Vue({
  render: h => h(App),
  router: router,
}).$mount('#app')

在其他文件中使用router

<template>
	<!--声明路由链接-->
	<router-link to="/book">书</router-link>
	<router-link to="/music">音乐</router-link>
	<!--声明路由占位符标签-->
	<router-view></router-view>
</template>

嵌套路由

只需要在一个路由后面加上children即可。

{path: '/book', component: Book, children: [
    {path: 'java', component: Java},
    {path: 'python', component: Python},
]},

Book组件中，必须也要有router-view

<template>
  <div>
  <h1>我是Book</h1>
    <router-link to="/book/java">java</router-link>
    <router-link to="/book/python">python</router-link>
    <router-view></router-view>
  </div>
</template>

如果没有的话，一个router-view是不可以渲染两个组件的，导致只能看到父亲组件

动态路由

就比如/image/1这样的路由，1是图片的id

<!--声明路由链接-->
<router-link to="/book">书</router-link>
<router-link to="/music">音乐</router-link>
<router-link to="/image/1">图片</router-link>
<!--声明路由占位符标签-->
<router-view></router-view>

router定义

const router = new VueRouter({
    routes: [
        {path:'/music', component: Music},
        {path:'/image/:id', component: Image}
    ]
})

组件中拿到id

<template>
  <h1>我是Image {{ $route.params.id }}</h1>
</template>

开启prop传递参数，方便我们更好的拿到参数

{path:'/image/:id', component: Image, props:true}

<template>
  <h1>我是Image {{ id }}</h1>
</template>

<script>
export default {
  name: "Image",
  props: ["id"]
}
</script>