vue引入路由——帮助管理页面跳转逻辑

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方法

这里需要注意三个点

1. post传参方式刷新会导致数据丢失
2. this.$route.params接收参数
3. 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（）

路由嵌套

 在同一个页面点击一个路由连接时， 在父级路由组件不消失的情况下，出现这一级指向的路径的下一级路由组件

在父级的路由规则对象中，添加children属性嵌套子路由（原则上可以无限嵌套），保证上级路由组件显示的同时，出现子路由组件。

举个栗子：实现new  ==》newsDetails的页面跳转管理

                尤其注意的to属性的 从父级开始写，/不要掉了，下面图的to写错了，应该是：/news/NewsDetails

 父级不消失，出现子路由组件。

新闻详情就是子级路由，news页面通过

重定向

 如果一个父级下有多个子路由，那么如果想配置默认的子路由显示，

 例二：

 

 用处：做系统的菜单，只替换中间的页面。