路由vue-router--官方路由管理器

路由vue-router–官方路由管理器

提取的hash值：#/keji (想只拿到keji)， location.hash.slice(1)

一、步骤

1.导入js文件

  <script src="./lib/vue_2.5.22.js"></script>
  <script src="./lib/vue-router_3.0.2.js"></script>

2.添加路由链接

 <router-link to="/user">User</router-link>

( 会渲染成 的效果 )

3.添加路由占位符

<router-view></router-view>

4.定义路由组件

 const User = {
      template: '<h1>User 组件</h1>'
    }

5.配置路由规则、创建路由实例

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

（这里的 routes 容易写错为router,routers）

6.把路由挂载到Vue根实例中

const vm = new Vue({
      el: '#app',
      // 挂在路由实例对象
      // router:router
      router
    })

7.路由重定向

回到根路径时，会自动跳转到 ‘/user’ 页面

 { path: '/', redirect: '/user' }

二、嵌套路由

const Rejister = {
      template: `<div>
        <h1>Rejister 组件</h1>
        <hr/>
        // 嵌套子组件
        <router-link to="/rejister/tab01">Tab01</router-link>
        <router-link to="/rejister/tab02">Tab02</router-link>
        <router-view></router-view>
        </div>`,
    }

父组件通过 children：[ ] 属性配置子级路由

 const router = new VueRouter({
      routes: [
       // 父级路由
       { path: '/user', component: User },
       { path: '/rejister',
         component: Rejister, 
         children: [
            // 子级路由
           { path: '/rejister/tab01', component: Tab01 },
           { path: '/rejister/tab02', component: Tab02 }
         ]
        }
      ]
    })

子组件在父组件的模块展示时的重定向

注意：redirect: ‘/rejister/tab01’

const router = new VueRouter({
      routes: [
        {
          path: '/',
          component: App,
          //路由重定向
          redirect: '/users',
          children: [
            // 配置子路由对象
            { path: '/users', component: Users },
            { path: '/rights', component: Rights },
            { path: '/goods', component: Goods },
            { path: '/orders', component: Orders },
            { path: '/settings', component: Settings }
          ]
        }
      ]
    })

三、动态匹配路由

获取参数

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

注意：动态绑定 id，要在 id 前加 冒号 ：

路由组件通过 $route.params 获取路由参数

const User = {
  template: '<h1>User 组件-----当前用户id为: {{$route.params.id}}</h1>'
}

路由组件传递参数

1.props的值为布尔值

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

需要props数组，接受参数

const User = {
  props:['id'],
  template: '<h1>User 组件-----当前用户id为: {{id}}</h1>'
}

2.props的值为对象类型

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

注意：name : ’ lisi ’ ，是 ： ，不是 等号

const User = {
  // props为数组
  props:['id','name','age'],
  template: '<h1>User 组件-{{id}}-{{name}}--{{age}}</h1>'
}

此时id没有参数传过来

3.props的值为函数类型

 const router = new VueRouter({
    routes: [{ path: '/user/:id', component: User, props: route => ({
      uname: 'lisi',
      age: 18,
      id: route.params.id
      })
    }]
  })

注意：route.params.id，没有 $ 符号

const User = {
  props:['id','name','age'],
  template: '<h1>User 组件-{{id}}-{{name}}--{{age}}</h1>'
}

注意：props 仍为数组

四、命名路由

 const router = new VueRouter({
    routes: [{ 
      name:'user', 
      path: '/user/:id', 
      component: User, props: route => ({
        uname: 'lisi',
        age: 18,
        id: route.params.id
      })
    }]
  })

添加了 name:‘user’

注意格式: 键值对

  <router-link to="/user/2">User2</router-link>
  <router-link :to="{name:'user', params:{id:3}}">User3</router-link>

注意：to 前面要有 冒号：，动态绑定

五、编程式导航

1.利用编程式导航API

注意区分 this.$router.push(’ ') 和 $route.params.id (处于活跃的路由？)

• this.$router.push(‘hash地址’) 跳转到hash地址

• this.$router.go(n) 前进或后退 n 位

  点击User页面的按钮—>会跳转到 Register 页面

const User = {
  template: `<div>
    <button @click="goRegister">跳转到注册页面</button></div>`,
  methods: {
    goRegister() {
      this.$router.push('/register')
    }
  }
}

点击Register 页面的按钮—>会跳转到 User页面

const Register = {
  template: `<div><button @click="goBack">后退</button></div>`,
  methods: {
    goBack() {
      this.$router.go(-1)
    }
  }
}

2.router.push( ) 方法的参数规则

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F4HOSyGK-1632816086742)(file:///C:\Users\Administrator\Documents\Tencent Files\1204014959\Image\C2C\6E5B5CD258DFD321CC3192E50FED0B35.png)]

基于vue-router的案例，要多看

六、安装和使用 vue-router

1.安装 vue-router

npm i vue-router --save

2.在模块化工程中使用

导入路由对象，并且调用 Vue.use(VueRouter)

创建路由实例，并传入路由映射配置

在Vue 实例中挂载路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

 const router = new VueRouter({
    routes: []
  })

<router-link />  标签
<router-view />  渲染的位置

创建路由的组件： .vue 文件 ？

标签 的属性：

to tag replace active-class

七、导航守卫

主要用来监听路由的进入和离开

vue-router 提供了beforeEach 和 afterEach 的钩子函数