Vue路由 vue-router

前端路由

1、是什么

前端路由是相对后端路由的一个概念，是开发SPA单页应用程序的必备核心模块。

本质：路由地址与组件之间映射

2、好处

• 用户体验更好
• 性能更优

3、实现原理

1. 基于Url的hash
2. 基于html5的历史模式api

hash：页面不刷新、还有访问记录

Vue-router 官方路由

与Vue.js核心深度集成的，开发SPA推荐使用

介绍

1. 支持hash模式和html5历史模式
2. 支持嵌套路由
3. 支持编程式路由
4. 支持路由参数
5. 支持命名路由

使用步骤

1、安装vue-router
npm install vue-router --save

2、导入vue-router，并安装插件
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3、配置路由规则并创建路由实体
const router = new VueRouter({
    routes: [
        // 路由规则是一个对象，至少包含path和component两个属性
        {path: '/foo', component: Foo},
        {path: '/good', component: Good}
    ]
})

4、关联Vue实例
const app = new Vue({
  router
}).$mount('#app')

路由重定向

const router = new VueRouter({
    routes: [
        // 路由规则是一个对象，至少包含path和component两个属性
        {path: '/', redirect: '/foo'},
        {path: '/foo', component: Foo},
        {path: '/good', component: Good}
    ]
})

嵌套路由

本质：组件中嵌套组件，父组件必须存在才可以显示嵌套的子组件

// 路由规则定义
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的  中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的  中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
})

const User = {
  template: `
    

      
User {{ $route.params.id }}
      
    
  `
}

注意事项
嵌套路由与组件中导入另一个组件使用有什么区别？

1、嵌套路由其实就是类似iframe，页面嵌套页面，子页面可以动态变化
2、组件中使用子组件，子组件不能变，只能通过传参改变子组件内部逻辑

动态路由

本质：通过url传参，但并非是查询字符串传参

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

// User组件中如何获取参数id
const User = {
  template: '
User {{ $route.params.id }}
'
}

注意事项

当多个路由都匹配到同一个组件时，为了组件能够更高效更好的用户体验，所以必须组件实例被复用，这导致另一个问题出现：组件实例的生命周期钩子不会再被调用，为此要使用watch监听$route来解决

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 对路由变化作出响应...
    }
  }
}

路由导航

1、声明式导航

跳转

2、编程式导航

// 跳转到某个路由
this.$router.push({ path: '/home' })

// 替换到某个路由
this.$router.replace({ path: '/home' })

// 前进/后退
this.$router.go(3)

注意事项
path不能与param一起使用，param是动态路由参数
query是查询字符串，可以给path和name一起使用
路由前加‘/’和不加的区别

命名路由

所谓命名路由：
在配置路由规则时，给路由规则配置一个name属性

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path:'/user/:id', name: 'user', component: User }
  ]
})

命名视图

相当于一个页面有多个iframe嵌套，每个iframe都是同级关系

注意事项：
如果命名视图和嵌套路由同时使用，将很混乱

入口与路由规则对应关系

app.vue内与顶级路由规则对应
每个页面内与页面嵌套路由相对应