vue-router

1、认识vue-router

2、安装和使用vue-router

2.1、安装

//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

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

const routers = []
// 2、创建VueRouter对象
const router = new VueRouter({
  routers//配置路由和组件之间的映射关系
})

// 3、将router对象传入vue实例
export default router

2.2、配置

2.3、使用

2.3.1、创建路由组件

2.3.2、配置路由映射-组件和映射的路由关系

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

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

import Home from '../components/Home'
import About from '../components/About'

const routes = [
  {
    path:'/home',
    component: Home
  },
  {
    path:'/about',
    component: About
  }
]
// 2、创建VueRouter对象
const router = new VueRouter({
  routes//配置路由和组件之间的映射关系
})

// 3、将router对象传入vue实例
export default router

2.3.3、使用路由

2.3.4、最终效果

3、设置路由的默认值

4、将地址栏默认的hash模式改为history模式，即地址栏中没有#

5、router-link的属性补充

5.1、tag

5.2、replace

5.3、active-class

添加class属性

5.4、修改linkActiveClass

在index.js中配置配置，也可以产生同样的效果。可以在按钮上添加class属性。

6、通过代码实现路由跳转-替换router-link

7、动态路由/user/:id

1、创建组件User.vue
2、引入组件，配置url

3、页面展示。v:bind是与data的属性绑定userId。动态获取userId的值。