引入vue-router
要引入vue-router，首先需要安装它。在项目目录下执行以下命令：
npm install vue-router
然后，在你的Vue项目中，可以通过以下方式引入和使用vue-router：
// main.js
import Vue from 'vue'
import App from './import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const router = new VueRouter({// 配置路由选项
})new Vue({render: h => h(App),router // 将router实例添加到Vue实例中
}).$mount('#app')
特色的标签及其作用
-
<router-view>： 用于渲染匹配到的视图组件，放在你希望显示视图的地方。 -
<router-link>： 用于导航到不同的路由，生成a标签，点击时会触发路由跳转。
使用vue-router设计路由
在创建VueRouter实例时，通过routes选项配置路由表。每个路由项都包含path（路径）和component（对应的组件）属性。
const router = new VueRouter({routes: [{ path: '/', component: Home },{ path: '/about', component: About },// ...其他路由配置]
})
历史记录在vue-router中的使用
vue-router使用HTML5的History API来管理路由历史记录。在配置VueRouter实例时，可以选择使用不同的mode：
const router = new VueRouter({mode: 'history', // 使用HTML5 History APIroutes: [...]
})
路由传参
路由传参可以通过在<router-link>中使用to属性，或在编程式导航中使用params或query来实现。
<!-- 在模板中使用 -->
<router-link :to="{ path: '/user', params: { userId: 123 }}">User</router-link><!-- 编程式导航 -->
this.$router.push({ path: '/user', params: { userId: 123 }})
嵌套路由
通过在路由配置中使用children属性，可以创建嵌套路由：
const router = new VueRouter({routes: [{path: '/parent',component: Parent,children: [{ path: 'child', component: Child }]}]
})
命名视图
可以在组件中使用<router-view>标签时，通过name属性来指定渲染的视图：
<router-view name="header"></router-view>
<router-view></router-view>
重定向
使用redirect属性进行重定向：
const router = new VueRouter({routes: [{ path: '/a', redirect: '/b' }]
})
导航守卫分类
- 全局导航守卫：
beforeEach,afterEach,beforeResolve - 路由独享守卫： 在路由配置中通过
beforeEnter字段设置 - 组件内的守卫：
beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave
路由元信息和路由过渡动效
在路由配置中可以通过meta字段添加路由元信息。路由过渡动效可通过在组件中使用<transition>标签来实现。
动态路由
通过在路由配置中使用动态路径参数，可以实现动态路由：
const router = new VueRouter({routes: [{ path: '/user/:id', component: User }]
})
