element实战三 单页面应用的控制中心-vue-router

• 路由的基本配置
  • 基本参数
    • path
      路由的访问路径。即url
    • component
      访问路径对应的组件
  • 扩展参数
    • name
      路由指定命名，设置后可用params传参及使用name进行路由跳转

实现敲localhost:8080/home展示home.vue内容

1.在src/router/index.js里（vue-cli3是一个放在外部的配置文件）

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home' ,
      component: () => import('../views/Home.vue'),//懒加载
    }
  ]
})

2.要再app.vue中加：

image.png

原因：在main.js中

image.png

• 路由的跳转
  • router-link标签跳转（相当于a标签）
  • 编程式导航

// route可以是对象，或者是字符串
// 对象的时候可通过路由的path或者name进⾏跳转
// 字符串的话只能是路由的path
this.$router.push(route)
// 路由传递参数, query和path配合， params和name配合
query: this.$router.push({path: '/', query: {id: 2}})
params: this.$router.push({name: 'home', params: {id: 2}})

1.点击home文件会跳转home.vue

image.png

2.用函数式编程实现

image.png

• 动态路由
  • 组件是同一个，只是通过不同的url参数渲染不同的数据
  • 路径参数"使用冒号"：标记
  • 在path里显示声明后，通过params传参后，参数不丢失同时参数被设置成必传参数

{
  path: '/home/:id',
  component: home
}

使用场景：依据用户不同ID跳转不同的页面

image.png image.png

这个时候输入“localhost:8080/home/123456”,会在页面中显示123456

• 嵌套路由
  • 目的：组件中嵌套不同组件
  • 实现

// 在需要嵌套的路由中补充children字段
{
  path: '/home/:id',
  component: home,
  children: []
}

例子：实现在home.vue中展示child.vue中的内容
1：在home.vue中加<router-view>
2:

image.png

• 守卫导航
  • 通过router中的beforeEach注册全局守卫，每次切换路由是触发
    在main.js中写

// to, from是路由对象，我们在路由⾥定义的参数都可以在这⾥取到，例如to.path或
from.name
router.beforeEach((to, from, next) => {
// ...
next()
})

to： 将进入的路由对象
from： 将离开的路由对象
next() 确认完成操作，最后一定要调用，不然路由就不会进行切换