Vue路由安装和配置方式

npm install vue-router --save

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

新建router文件夹&＃xff0c;新建index.js文件

//配置路由相关的信息
import VueRouter from &＃39;vue-router&＃39;
//1.通过Vue.use(插件)&＃xff0c;安装插件
import Vue from "vue";
Vue.use(VueRouter)//2. 创建VueRouter对象
const router &＃61; new VueRouter({//配置路由和组件之间的应用关系routes: []
})//3.将router实例&＃xff0c;挂在vue实例
export default router


1. 创建路由组件
2. 配置路由映射&＃xff1a; 组件和路径映射关系
3. 使用路由&＃xff1a; 通过和
   
   
   

Vue三大功能

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

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