Vue扩展知识简单了解

引入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')

特色的标签及其作用

1. <router-view>： 用于渲染匹配到的视图组件，放在你希望显示视图的地方。

2. <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 API
  routes: [...]
})

路由传参

路由传参可以通过在<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' }
  ]
})

导航守卫分类

1. 全局导航守卫： beforeEach, afterEach, beforeResolve
2. 路由独享守卫： 在路由配置中通过beforeEnter字段设置
3. 组件内的守卫： beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

路由元信息和路由过渡动效

在路由配置中可以通过meta字段添加路由元信息。路由过渡动效可通过在组件中使用<transition>标签来实现。

动态路由

通过在路由配置中使用动态路径参数，可以实现动态路由：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})