【vue2第十六章】VueRouter 声明式导航(跳转传参)、路由重定向、页面未找到的提示页面404、vue路由模式设置

声明式导航(跳转传参)

在一些特定的需求中，跳转路径时我们是需要携带参数跳转的，比如有一个搜索框，点击搜索的按钮需要跳转到另外一个页面组件，此时需要把用户输入的input框的值也携带到那页面进行发送请求，请求数据。

跳转传参分为：

查询参数传参。

直接在router-link标签的to属性像get请求方式一样传参数：

<ul class="menu"><!-- ？后面跟参数 多个参数使用&连接 --><router-link to="/index?title=首页&id=1">首页</router-link><router-link to="/fine?title=发现&id=2">发现</router-link><router-link to="/friend?title=朋友&id=3">朋友</router-link></ul>

跳转的页面获取参数直接使用：模板语法{{ $route.query.title }}就可以获取，在js代码中需要在最前面加this如：

this.$route.query.title

<template><div><!-- 模板语法获取参数 --><p>{{ $route.query.title }}</p><p>我的首页</p><p>我的首页</p></div></template><script>export default {};</script><style></style>

动态路由传参。
动态路由传参就是在路由规则上面做手脚。

在路由配置中：

import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import VueRouter from 'vue-router'
import Vue from 'vue'Vue.use(VueRouter)const router = new VueRouter({routes:[//修改为 path:"/路径名/：参数名"{path:"/fine/:id",component:MyFine},//修改为 path:"/路径名/：参数名"{path:"/friend/:id",component:MyFriend},//修改为 path:"/路径名/：参数名"{path:"/index/:id",component:MyIndex},],linkActiveClass:"active",linkExactActiveClass:"exact-active"});export default router;

配置导航链接：直接在路由后面跟上 /参数值

		<!-- 修改为to="/路径/参数值" --><router-link to="/index/1">首页</router-link><router-link to="/fine/2">发现</router-link><router-link to="/friend/3">朋友</router-link>

跳转页面获取参数(在html中)：

    <div><!-- 模板语法获取参数 --><p>{{ $route.params.id }}</p><p>我的首页</p><p>我的首页</p></div>

在js中获取参数：

this.$route.params.id

问题:配了路由 path:“/search/:words”为什么按下面步骤操作，会未匹配到组件，显示空白?
原因: /search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符”?"
在参数后方跟一个?就表示可传参也可不传了

     // path:"/路径/:参数名?"{path:"/fine/:id?",component:MyFine},

两种方式的优点：
在这里插入图片描述

路由重定向

在项目启动时，页面的内容时空的，因为他的路径是下图这样的：
在这里插入图片描述
那我们如何将这个默认路由改为首页的路由，让页面刚进入的时候就重定向到首页呢？

修改index.js里面的代码：
配置当访问到"/"时，就用redirect属性重定向到需要显示的页面，这样就可以解决页面进入时空白的问题
也可以使用重定向做一些其他的功能不限于此，看需求。

import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)const router = new VueRouter({routes:[//配置当访问到"/"时，就用redirect属性重定向到需要显示的页面，这样就可以解决页面进入时空白的问题{path:"/",redirect:'/index'},{path:"/fine",component:MyFine},{path:"/friend",component:MyFriend},{path:"/index",component:MyIndex},],linkActiveClass:"active",linkExactActiveClass:"exact-active"});export default router;

页面未找到的提示页面404

在这里插入图片描述
这里得创建一个提示页面组件，这是我创建的：

<template><div><h1>404</h1><h3>页面未找到哟</h3></div>
</template><script>
export default {}
</script>

然后再路由模块中修改代码，添加 {path:"*",component:NotFind}：
注意：一定要放到路由注册得最底部，因为vue找路由路径是从上往下找，而这个*代表所有路径都可以匹配，要让它找完前面所有的路由，才表示没有，最后匹配404页面。

import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import NotFind from '@/views/NotFind.vue'import VueRouter from 'vue-router'
import Vue from 'vue'Vue.use(VueRouter)const router = new VueRouter({routes:[{path:"/",redirect:'/fine'},{path:"/fine",component:MyFine},{path:"/friend",component:MyFriend},{path:"/index",component:MyIndex},//放到最底部 * 匹配所有{path:"*",component:NotFind}],linkActiveClass:"active",linkExactActiveClass:"exact-active"});export default router;

vue路由模式设置

问题:路由的路径看起来不自然有#，能否切成真正路径形式?
在这里插入图片描述

hash路由(默认) 例如: http://localhost:8080/#/home
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持)

import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import NotFind from '@/views/NotFind.vue'
import VueRouter from 'vue-router'
import Vue from 'vue'Vue.use(VueRouter)
const router = new VueRouter({
//设置模式为historymode:"history",routes:[{path:"/",redirect:'/fine'},{path:"/fine",component:MyFine},{path:"/friend",component:MyFriend},{path:"/index",component:MyIndex},{path:"*",component:NotFind}],linkActiveClass:"active",linkExactActiveClass:"exact-active"});export default router;