1、下载安装路由 npm install vue-router
2、创建路由表 router.js
a .引入vue和vue-router
b .在vue中使用vue-router
c .创建路由实例确定路径和组件的对应关系
d. 抛出路由实例
3 、在main.js注册路由
4、就可以使用两个组件
控制地址栏改变
开启一片空间渲染指定的组件
总结:当前三步都完成后,才能执行4步两个组件
1、 router-link 默认渲染成a标签,to到点击之后要去的组件,控制地址栏改变
2、可以在任何地方用,渲染不同的组件
router-link 默认为a标签
to表示地址栏变成啥样
tag可以控制渲染元素
active-class激活状态的类名
路由有两种模式:
hash 哈希模式 和 history 历史模式
通过路由表里 mode 设置
区别:hash 路由 地址栏有#
history 路由没有# 和正常使用的类似