Vue-路由-安装和配置方式

安装和使用

npm install vue-router --save

1. 导入路由对象，并调用Vue.use(VueRouter)
2. 创建路由实例，并传入路由映射配置
3. 在Vue实例中挂在创建的路由实例

新建router文件夹，新建index.js文件

//配置路由相关的信息
import VueRouter from 'vue-router'
//1.通过Vue.use(插件)，安装插件
import Vue from "vue";
Vue.use(VueRouter)

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

  ]
})

//3.将router实例，挂在vue实例
export default router

路由配置映射

1. 创建路由组件
2. 配置路由映射： 组件和路径映射关系
3. 使用路由： 通过<router-link>和<router-view>
   
   
   

Vue三大功能

---

有两个问题
1.为什么要使用Vue.use(VueRouter) ?
注册声明！
2.为什么url中有 “#” ?
vue-router的实现方式，默认为hash模式

---

<router-link>：该标签是一个vue-router中已经内置的组件，他会被渲染成一个<a>标签
<router-view>:该标签会根据当前的路径，动态渲染出不同的组件
网页的其他内容，比如顶部的标题导航，或者底部的一些版权信息等会和<router-view>处于同一个等级
在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

路由的默认值

路由改为history方式

hash值不好看啊！！

router-link 属性补充

tag属性

• replace： 不会留下history记录，后退键返回不能返回到上一个页面中
• 
  或者这样

 <div id="app">
    <router-link to="/home" tag="button" replace active-class="active">首页</router-link>
    <router-link to="/about" tag="button" replace active-class="active">关于</router-link>
    <router-view></router-view>
  </div>

通过代码进行路由跳转