Vue学习笔记 8 - Vue-Router 详解

认识路由

发展阶段(p100各种方式原理)：

URL 的 hash

URL 的 hash 也就是锚点(#)，本质上是改变 window.location 的 href 属性。我们可以通过直接赋值 location.hash 来改变 href，但是页面不发生刷新。

原地址：

http://localhost:8080

在控制台输入：

location.hash = 'aaa'
//http://localhost:8080/aaa
location.hash = 'bbb'
//http://localhost:8080/bbb

HTML5 的 history 模式

• pushState(栈操作)

history.pushState({},'','home')
http://localhost:8080/home
history.pushState({},'','about')
http://localhost:8080/about

（可以使用history.back后退）

• replace

history.replaceState({},'','home')
http://localhost:8080/home
history.replaceState({},'','about')
http://localhost:8080/about

（直接替换，不可返回）

• go

history.back等价于history.go(-1)

history.forward等价于history.go(1)

这三个接口等价于浏览器的前进后退

 

认识 vue-router

 

vue-router 基本使用

• 安装 vue-router

npm install vue-router --save

• 在模块化工程中使用它（因为它是一个插件，所以可以通过 Vue.use()来安装路由功能）
  • 第一步：导入路由对象，并且调用 Vue.use(VueRouter)
  • 第二步：创建路由实例，并且传入路由映射配置
  • 第三步：在 Vue 实例中挂载创建的路由实例

src/router/index.js：

// 配置路由相关的信息

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

// 1.通过 Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2.创建 VueRouter 对象
const routes = []
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes
})

// 3.将router 对象传入到 Vue 实例中
export default router

main.js：

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

App.vue：

<template>
  <div id="app">
  </div>
</template>

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

<style>
</style>

• 使用 vue-router ：
  • 第一步：创建路由组件

src/components/home.vue：

<template>
    <div>
        <h4>我是首页</h4>
        <p>我是首页的内容</p>
    </div>
</template>

<script>
    export default {
        name: "home"
    }
</script>

<style scoped>
</style>

src/components/about.vue：

<template>
    <div>
        <h4>我是关于</h4>
        <p>我是关于的内容</p>
    </div>
</template>

<script>
    export default {
        name: "about"
    }
</script>

<style scoped>
</style>

• 第二步：配置路由映射：组件和路径映射关系
  src/router/index.js：

// 配置路由相关的信息

import Vue from 'vue'
import VueRouter from 'vue-router'
import home from '../components/home'
import about from '../components/about'

// 1.通过 Vue.use(插件)，安装插件
Vue.use(VueRouter)

// 2.创建 VueRouter 对象
const routes = [
    {
        path: '',
        // redirect：重定向
        // 将根路径重定向到 /home 的路径下
        redirect: '/home'
    },
    {
        path: '/home',
        component: home
    },
    {
        path: '/about',
        component: about
    }
]
const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes,
    // 默认情况下，路径的改变使用的是 URL 的 hash
    // 如果希望使用 HTML5 的 history 模式，进行如下配置：
    mode: 'history'
})

// 3.将router 对象传入到 Vue 实例中
export default router

• 第三步：通过和使用路由
  • ：该标签是一个 vue-router 中已经内置的组件，它会被渲染成一个标签。
  • ：该标签会根据当前的路径，动态渲染出不同的组件。
  • 网页的其他内容，比如顶部的标题/导航，或者底部的一些版权等会和处于同一个等级。
  • 在路由切换的时候，切换的是挂载的组件，其他内容不会发生改变。

App.vue：

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style>
</style>

结果：

补充：

 

vue-router 嵌套路由

 

vue-router 参数传递

 

vue-router 导航守卫

 

vue-router keep-alive

 

参考视频：小码哥 Vue 视频教程