路由控制(vue-router)

目录

路由 vue router

基本路由

注意

多级路由

路由的query参数

命名路由

路由跳转replace方法

编程式路由导航

activated deactivated

---

路由 vue router

Vue router的理解：vue的一个插件库，专门用来实现SPA（单页Web）应用

对于单页应用的理解：

1. 整个应用只有一个完整的页面
2. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
3. 数据需要通过ajax请求获取

基本路由

1.安装vue-router，命令 npm i vue-router

根据使用vue2和vue3决定vue-router版本

vue2要使用vue-router3即npm i vue-router@3

2 应用插件Vue.use(VueRouter)

3 编写 router 配置项

4 实现切换

<router-link></router-link>浏览器会被替换为 a 标签

active-class 可配置高亮样式

5 指定展示位<router-view></router-view>

注意

1 路由组件通常存放在pages文件夹中，一般组件通常存放在 components 文件夹

2 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3 每个组件都有自己的 $route 属性，里面存储着自己的路由信息

4 整个应用只有一个 router ，可以通过组件的 $router 属性获取到

多级路由

配置路由规则，使用children配置项

简单路由的实现(使用bootstrap进行ui布局)

app.vue

<template>
  <div>
  <div class="row">
  <div class="col-xs-offset-2 col-xs-8">
  <div class="page-header"><h2>Vue Router Demo</h2></div>
  </div>
  </div>
  <div class="row">
  <div class="col-xs-2 col-xs-offset-2">
  <div class="list-group">
 <!-- 原始html中我们使用a标签实现页面的跳转 -->
  <!-- <a class="list-group-item active" href="./about.html">About</a> -->
  <!-- <a class="list-group-item" href="./home.html">Home</a> -->
 <!-- Vue中借助router-link标签实现路由的切换 -->
      <router-link class="list-group-item"
        active-class="active" to="/about">About</router-link>
      <router-link class="list-group-item"
        active-class="active" to="/home">Home</router-link>
        </div>
        </div>
        <div class="col-xs-6">
      <div class="panel">
      <div class="panel-body">
      <!-- 指定组件的呈现位置 -->
        <router-view></router-view>
      </div>
    </div>
    </div>
    </div>
  </div>
 </template>

<script>

export default {
  name: 'App',

}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)
new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

router/index.js

import VueRouter from 'vue-router'

import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                },
            ]
        },
    ]
})

pages/About.vue

<template>
    <h2>我是About的内容</h2>
</template>

<script>
    export default{
        name:'About'
    }
</script>

pages/Home.vue

<template>
    <div>
        <h2>我是Home的内容</h2>
        <ul>
            <li><router-link class="list-group-item" active-class='active' to="/home/news">News</router-link></li>
            <li><router-link class="list-group-item" active-class='active' to="/home/message">Message</router-link></li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default{
        name:'Home'
    }
</script>
<style>

</style>

pages/Message.vue

<template>
    <div>
        <li><a href="/message1">message1</a></li>
        <li><a href="/messgae2">messgae2</a></li>
        <li><a href="/messgae3">messgae3</a></li>
    </div>
</template>

<script>
    export default{
        name:'Message'
    }
</script>

pages/News.vue

<template>
    <div>
        <li>news001</li>
        <li>news002</li>
        <li>news003</li>
    </div>
</template>

<script>
    export default{
        name:'News'
    }
</script>

实现效果图：

路由的query参数

1. 传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->

<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>

<!-- 跳转并携带query参数，to的对象写法（推荐） -->

<router-link

:to="{

path:'/home/message/detail',

query:{

 id: m.id,

 title: m.title

}

}"

>跳转</router-link>

2.接收参数

 $route.query.id     $route.query.title

命名路由

1作用：可以简化路由的跳转

2在router、index.js中配置name:’’xxx”

<Router-link :to=”{name:’xxx’}”>跳转</router-link>

路由跳转replace方法

1 作用：控制路由跳转时操作浏览器历史记录的模式

2 浏览器的历史记录有两种写入方式： push 和 replace

push 是追加历史记录

replace 是替换当前记录，路由跳转时候默认为 push 方式

3 开启 replace 模式

<router-link :replace="true" ...>News</router-link>

简写 <router-link replace ...>News</router-link>

总结：浏览记录本质是一个栈，默认 push ，点开新页面就会在栈顶追加一个地址，后退，栈顶指针向下移动，改为 replace 就是不追加，而将栈顶地址替换

编程式路由导航

作用：不借助 <router-link> 实现路由跳转，让路由跳转更加灵活

this.$router. push({}) 内传的对象与 <router-link> 中的 to 相同

this.$router. replace({})

this.$router. forward() 前进

this.$router. back() 后退

this.$router. go(n) 可前进也可后退，n为正数前进n，为负数后退

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

<keep-alive include="News"><router-view></router-view></keep-alive>

<keep-alive :include="['News', 'Message']"><router-view></router-view>

</keep-alive>

activated deactivated

activated 和 deactivated 是路由组件所独有的两个钩子，用于捕获路由组件的激活状态具体使用

1 activated 路由组件被激活时触发

2 deactivated 路由组件失活时触发

路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

路由器的两种工作模式

1 对于一个 url 来说，什么是 hash值 ？

# 及其后面的内容就是 hash值

2 hash值 不会包含在 HTTP 请求中，即： hash值 不会带给服务器

3 hash 模式

a 地址中永远带着#号，不美观

b 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法

c 兼容性较好

4 history 模式

a 地址干净，美观

b 兼容性和 hash 模式相比略差

c 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题