前端路由阶段

核心：改变URL，但是页面不进行整体的刷新

### URL的hash 

1
2
3
4
5
6
//在浏览器终端输入
location.hash = '/foo'

location.href

//改变URL是不会刷新页面的

HTML的history模式：pushState

1
2
3
4
5
history.pushState({data},'title','url')

//通过HTML5这种pushState的方式，是栈结构。
//可以通过 history.back()出栈，history.forward() 入栈
//使用 history.go(-1) 出栈一个，history.go(1) 进栈一个

安装vue-router

  1. 通过npm安装vue脚手架项目的时候安装路由
  2. 安装vue-router：npm install vue-router --save
  3. 在模块化工程中使用它（因为是一个插件，所以可以通过Vue.use()来安装路由功能）
    • 导入路由对象，并调用 Vue.use(VueRouter)
    • 创建路由实例，并且传入路由映射配置
    • 在Vue实例中挂载创建的路由实例

使用vue-router的步骤

  • 第一步：创建路由组件
  • 第二步：配置路由映射关系，组件和路径的映射关系
  • 第三步：使用路径，通过<router-link> 和 <router-view>

创建路由组件

/src/components 放vue组件


配置路由映射关系，组件和路径的映射关系

/src/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//导入vue和router
import Vue from 'vue' 
import Router from 'vue-router'

//导入home.js about.js
import home from '../components/home.vue'
import about from '../components/about.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      component: home
    },
    {
      path: '/about',
      component: about
    }
  ]
})


/src/App.vue main.js渲染的就是这个vue模板，因此我们在里面写全局组件<router-link> 和 <router-view>

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
  <div id="app">
    <router-link to="/home">home</router-link>
    <router-link to="/about">about</router-link>
		<router-view></router-view>
  </div>
</template>

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

<style>

</style>

内置组件

<router-link>该标签是一个vue-router中已经内置的组件,它会被渲染成一个<a>标签.

<router-view>该标签会根据当前的路径,动态渲染出不同的组件

网页的其他内容,比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级.

在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变.

1
2
3
<!--添加tag="button"属性，现在渲染的就是按钮-->
<router-link to='/home' tag="button"></router-link>

默认页面路径使用的是pushState栈结构，可以使用返回向前操作，如果不允许这样使用，可以在router-link 添加属性replace

  • tag：tag可以指定渲染组件
  • replace：不会留下history记录，因此不能使用后退健返回上一个页面
  • active-class：默认的class类叫router-link-class
1
<router-link to='/home' tag="button" active-class="active"></router-link>

更改后，就是active类了，但是尽量使用默认的名字，不修改

在路由配置里面，修改默认值

1
2
3
4
5
export default new Router({
  routes,
  mode: 'history' ,//修改模式
  linkActiveClass: 'cst-active'
})

路由默认路径，显示首页

1
2
3
4
{
  path: '/',
  redirect: '/home'
},

router/index.js


配置router参数

默认模式hash

默认模式路径带#号，对路径不美观，我们可以修改模式为HTML5的history模式

/router/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//抽离了一下 routes
const routes  = [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/content',
      component: Content
    }
  ]

export default new Router({
  routes, //增强写法
  mode: 'history' //修改模式
})

使用methods方法来跳转网页

App.vue

1
2
3
<router-view></router-view>
<button @click="home">home</button>
<button @click="about">about/button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
export default {
  name: 'App',
  methods:{
    home(){
      // this.$router.push('/home')
      this.$router.replace('/home')
    },
    about(){
      // this.$router.push('/about')
      this.$router.replace('/about')
    }
  }

}