1、安装路由
npm install --save vue-router
2、准备两个存在相互跳转逻辑的页面
新建文件夹views新建文件 AboutViews.vue HomeViews.vue
3、配置独立文件
新建文件夹router 新建文件 index.js
history 表示访问方式
4、在main.js文件进行全局导入和挂载
5、最后使用
router-view
或 router-link 标签——无参模式的声明式导航,并router-link标签添加to属性值 ==》来是router文件夹下的index.js文件中的配置,最后运行显示
router-link 标签——传参模式的声明式导航
①get方法 “?+参数”
或者 在index文件中,path属性后添加键名使用(更推荐),如下:
②get方法二 query属性 配置参数
③post方法
这里需要注意三个点
- post传参方式刷新会导致数据丢失
- this.$route.params接收参数
- URL地址栏传参隐藏
$router
是用于做编程式导航的(改变路由的);$route
是用户获取路由信息的。
如果用router-view标签嵌套包裹router-link标签使用,那么只会显示router-link标签内容如下:
并注意观察地址栏变化:
默认:
点击关于:
点击首页 :
最后补充创建路由时的,用createWebHistory()方法和用createWebHashHistory()方法的区别:
◉ createWebHashHistory
在显示上:
点击首页: http://localhost:8080/#/
点击关于页面:http://localhost:8080/#/about
原理: a标签的锚点,虽然不好看,但是胜在不需要后端配合
◉ createWebHistory
在显示上:
点击首页: http://localhost:8080/
点击关于页面:http://localhost:8080/about
此种方法虽然好看。但需要后台配合做重定向,否则会出现404问题
原理:H5 pushState()
路由嵌套
在同一个页面点击一个路由连接<router-link>
时, 在父级路由组件<router-view>
不消失的情况下,出现这一级<router-link>
指向的路径的下一级路由组件<router-view>
在父级的
路由规则对象中,添加children属性嵌套子路由(原则上可以无限嵌套),保证上级路由组件显示的同时,出现子路由组件。
举个栗子:实现new ==》newsDetails的页面跳转管理
尤其注意<router-link>
的
to
属性的 从父级开始写,/不要掉了,下面图的to写错了,应该是:
/
news/NewsDetails
父级不消失,出现子路由组件。
新闻详情就是子级路由,news页面通过<router-view>
重定向
如果一个父级下有多个子路由,那么如果想配置默认的子路由显示,
例二:
用处:做系统的菜单,只替换中间的页面。