vue路由详解

vue路由详解

何为 router、routes、route ❗❓

router → index.js 文件

import Router from 'vue-router'

const router = new Router({
  routes: [
  	// 下面的对象就是路由记录
    {
      path: "/a",
      name: "a",
      component: A,
      children: [
        // 这也是个路由记录
        { path: 'b', component: B }
      ]
    },
    {
      // ...
    }
  ],
})

一、router

router：全局的路由实例，是router构造方法的实例。
const router = new Router({})
在 Vue 实例内部，我们可以通过 $router 访问路由实例。

• 想要导航到不同的 URL，则使用 router.push() 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
• router.replace() 跟 router.push() 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
• router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
  • router.go(1) 表示在浏览器记录中前进一步，等同于history.forward()
  • router.go(-1) 表示后退一步记录，等同于 history.back()
  • router.go(-100) 或 router.go(100) 如果 history 记录不够用，那就默默地失败

二、routes

routes：指创建vue-router路由实例的配置项。用来配置多个 route 路由对象。

三、route

route：路由对象（route object）表示当前被激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录（ route records）。
即$router会被注入每个组件中，我们可以利用它获取当前路由的一些信息。

路由对象属性

1.$route.path
	字符串，对应当前路由的路径，总是解析为绝对路径，如 "/foo/bar"。
2.$route.params
	一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
3.$route.query
	一个 key/value 对象，表示 URL 查询参数。
4.$route.hash
	当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
5.$route.fullPath
	完成解析后的 URL，包含查询参数和 hash 的完整路径。

四、小案例

1. 设置导航

<template>
  <div id="nav">
    <!-- 使用 router-link 组件来导航 -->
    <!-- 通过传入 `to` 属性指定目标地址，它可以是一个字符串或者是描述目标位置的对象。 -->
    <!-- router-link 默认会被渲染成一个 <a> 标签，可以通过配置 tag 属性生成别的标签 -->
    <!-- 当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。默认为："router-link-active"，也可通过 active-class 属性修改默认class -->
    <router-link to="/home">Go to home</router-link>
    <router-link to="/about">Go to about</router-link>
  </div>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view/>
</template>

当我们点击 <router-link> 时，会在内部调用 router.push，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

2. 创建路由组件。一个路由映射一个组件。

to="/home"     →    Home.vue
to="/about"    →    About.vue

3. 配置路由

// 导入Home.vue
import Home from '../views/Home.vue'
// 路由配置
// 当路径匹配到当前路由参数时，就会跳转到component所对应的页面组件，
const routes = [
  // 指定根路径
  {
    path: '/',
    // 命名路由 -- 通过一个名称来标识一个路由
    name: 'home',
    component: Home
  },
  {
    path: '/About',
    name: 'about',
    // 路由懒加载写法
    component: () => import('../views/About.vue')
  }
]

五、路由跳转 + 传参

5.1 声明式导航 router-link

注意：router-link 中 path 如果是 '/' 开始就是从根路由开始，如果不带 '/' ，则从当前路由开始。

router-link 属性

1.to
	表示目标路由的链接。它可以是一个字符串或者是描述目标位置的对象。
2.replace
	禁止回退。
3.tag
	router-link 默认会被渲染成一个 <a> 标签，可以通过配置 tag 属性生成别的标签。
4.active-class
	当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。默认为："router-link-active"，我们可通过该属性修改默认class。
	也可以通过路由的构造选项 linkActiveClass 来全局配置。
5.exact-active-class
	链接被精确匹配的时候应该激活的 class。默认值: "router-link-exact-active"，我们可通过该属性修改默认class。
	也可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。

5.1.1 不带参数

// to为字符串
<router-link to="/home">
// to为对象，同上
<router-link :to="{path:'/home'}"> 
// 通过name跳转，同上
<router-link :to="{name:'home'}">  

5.1.2 传参

👉 query传参

1.路由配置：
	name: 'home',
	path: '/home'
	component: () => import('home组件路径')
2.跳转：
	<router-link :to="{name:'home', query: {id:1}}">
	<router-link :to="{path:'/home', query: {id:1}}">
3.获取参数
	html取参: $route.query.id
	script取参: this.$route.query.id
4.URL：
	http://localhost:8080/#/home?id=1

👉 params传参

1.路由配置：
	name: 'home',
	path: '/home'
	component: () => import('home组件路径')
2.跳转：
	<router-link :to="{name:'home', params: {id:1}}">
	// 这里的 params 不生效
	// <router-link :to="{path:'/home', params: {id:1}}">
3.获取参数
	html取参: $route.params.id
	script取参: this.$route.params.id
4.URL：
	http://localhost:8080/#/home

注意：
（1）只能用 name 匹配路由不能用path
（2）params传参数(类似post，跳转之后页面 url 后面不会拼接参数)  

👉 to="/路径/参数"

1.路由配置：
	name: 'home',
	path: '/home/:id'
	component: () => import('home组件路径')
2.跳转：
	<router-link to="/home/1">
3.获取参数
	html取参: $route.params.id
	script取参: this.$route.params.id
4.URL：
	http://localhost:8080/#/home/1

5.2 编程式导航 this.$router.push()

5.2.1 不带参数

this.$router.push('/home')
// 或者
this.$router.push({name:'home'})
// 或者
this.$router.push({path:'/home'})

5.2.2 传参

👉query传参

1.路由配置：
	name: 'home',
	path: '/home'
	component: () => import('home组件路径')
2.跳转：
	this.$router.push({name:'home',query: {id:'1'}})
	this.$router.push({path:'/home',query: {id:'1'}})
3.获取参数
	html取参: $route.query.id
	script取参: this.$route.query.id

query 类似 get，跳转之后页面 url 后面会拼接参数，类似?id=xx。不重要的参数可以这样传，但密码之类的还是用params，刷新页面 id 还在。

👉 params传参

1.路由配置：
	name: 'home',
	path: '/home/:id'
	component: () => import('home组件路径')
2.跳转：
	this.$router.push({name:'home',params: {id:'1'}})
3.获取参数
	html取参:$route.params.id 
	script取参:this.$route.params.id

注意：
（1）只能用 name 匹配路由不能用path
（2）params传参数(类似post，跳转之后页面 url 后面不会拼接参数)  
（3）路由配置 path: "/home/:id" 否则刷新参数消失

👉path传参

1.路由配置：
	name: 'home',
	path: '/home/:id'
	component: () => import('home组件路径')
2.跳转：
	this.$router.push({path:'/home/xx'}) 
	// 或者
	this.$router.push('/home/xx') 
3.获取参数：
	this.$route.params.id

六、嵌套路由

使用 children 数组来定义子路由。

6.1 小案例

模板

<template id="home">
   <div>
     <router-link to="/home/login">登录</router-link>
     <router-link to="/home/sign">注册</router-link>
     <!-- 路由匹配到的组件将渲染在这里 -->
     <router-view></router-view>
   </div>
</template>

配置路由

{ 
  path: '/home', 
  name:'home',
  component: Home, 
  /*children:[
      { path: '/home/login', component: Login},
      { path: '/home/sign', component: Sign}
  ]*/
  // 在生成路由时，主路由上的path会被自动添加到子路由之前，所以子路由上的path不用在重新声明主路由上的path了。
  // 以“/”开头的嵌套路径会被当作根路径，所以子路由上不用加“/”。
  children:[
      { path: 'login', component: Login},
      { path: 'sign', component: Sign}
  ]
},