Vue路由 vue-router

完整URL

http://localhost:80/MzyPractice/chapter10/testb.php?name=Mei&radio=Test#dowel

1、传输协议：http，https
2、域名： localhost
3、端口： 不填写的话默认走的是80端口号
4、路径： /MzyPractice/chapter10/testb.php。 /表示根目录
5、查询参数：?name=Mei&radio=Test
6、哈希值：#dowel

前端路由

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、配置路由规则并创建路由实体
import Foo from './views/Foo'
import Good from './views/Good'
const router = new VueRouter({
    routes: [
        // 路由规则是一个对象，至少包含path和component两个属性
        {path: '/foo', component: Foo},
        {path: '/good', component: Good}
    ]
})

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

最佳实战

1、增加路由规则目录routes
2、为了性能，必须使用懒加载

// 在src/routes/base.js中代码如下：
export default [
    {
        path: 'baseLogin',
        name: 'baseLogin',
        component: () =>import('@/views/base/Login.vue')
    }
];

// 在src/router.js中代码如下：
import base from '@/routes/base.js'
const router = new VueRouter({
    routes: [
        // 路由规则是一个对象，至少包含path和component两个属性
        ..base
    ]
})
export default router

路由重定向

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

嵌套路由

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

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

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

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

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

动态路由

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

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

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

注意事项

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

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

路由导航

1、声明式导航

<router-link to="/foo">跳转</router-link>

2、编程式导航

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

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

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

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

尽量不要使用path导航，最佳实践：使用name导航

命名路由

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

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

命名视图

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

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

出口与路由规则对应关系

app.vue根组件的<router-view>出口与顶级路由规则对应
每个页面组件的<router-view>出口与页面嵌套路由规则对应