第一步： 安装路由

cnpm i -S vue-router

第二步：

第三步：在index.js中写入如下内容

// 1 配置路由相关信息
import VueRouter from "vue-router"
import Vue from "vue"
import about from "../components/about";
import home from "../components/home";

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

const routes = [
   {
      path:"/home",
      component: home,
   },
   {
      path:"/about",
      component: about,
   },
]

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

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

第四步：

在main.js中使用 路由

第五步：

在component中分别创建两个vue文件

内容如下：

<template>
    <h1>我是home</h1>
</template>

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

<style scoped>
    h1{
        background-color: yellow;
    }
</style>

第六步：

最终效果：

                            08:26:58

 

 

 router-link的属性

1 tag属性

2 自带replace属性 

 

通过click的方式来进行路由的切换

3 自带的激活属性

 

路由重定向，懒加载：

子路由：

路由传参

注意是$route不是$router 

第二种方式 

效果：

第三种方式 通过点击事件来完成

如果想让路由上的某个参数可传可不传则可以这样写

 

 $router和$route的区别：

 组件内部回退路由记住路由的方法：

 效果如下：

 注意，exclude后边多个组件需要排除的话中间的逗号两遍是不能有空格的