声明式导航(跳转传参)
在一些特定的需求中,跳转路径时我们是需要携带参数跳转的,比如有一个搜索框,点击搜索的按钮需要跳转到另外一个页面组件,此时需要把用户输入的input框的值也携带到那页面进行发送请求,请求数据。
跳转传参分为:
- 查询参数传参 。
直接在router-link标签的to属性像get请求方式一样传参数:
javascript
<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如:
javascript
this.$route.query.title
javascript
<template>
<div>
<!-- 模板语法获取参数 -->
<p>{{ $route.query.title }}</p>
<p>我的首页</p>
<p>我的首页</p>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
- 动态路由传参 。
动态路由传参就是在路由规则上面做手脚。
在路由配置中:
javascript
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;
配置导航链接:直接在路由后面跟上 /参数值
html
<!-- 修改为to="/路径/参数值" -->
<router-link to="/index/1">首页</router-link>
<router-link to="/fine/2">发现</router-link>
<router-link to="/friend/3">朋友</router-link>
跳转页面获取参数(在html中):
html
<div>
<!-- 模板语法获取参数 -->
<p>{{ $route.params.id }}</p>
<p>我的首页</p>
<p>我的首页</p>
</div>
在js中获取参数:
javascript
this.$route.params.id
问题 :配了路由 path:"/search/:words"为什么按下面步骤操作,会未匹配到组件,显示空白?
原因 : /search/:words 表示,必须要传参数。如果不传参数,也希望匹配,可以加个可选符"?"
在参数后方跟一个?
就表示可传参也可不传了
javascript
// path:"/路径/:参数名?"
{path:"/fine/:id?",component:MyFine},
两种方式的优点 :
路由重定向
在项目启动时,页面的内容时空的,因为他的路径是下图这样的:
那我们如何将这个默认路由改为首页的路由,让页面刚进入的时候就重定向到首页呢?
修改index.js里面的代码:
配置当访问到"/"时,就用redirect属性重定向到需要显示的页面,这样就可以解决页面进入时空白的问题
也可以使用重定向做一些其他的功能不限于此,看需求。
javascript
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
这里得创建一个提示页面组件,这是我创建的:
html
<template>
<div>
<h1>404</h1>
<h3>页面未找到哟</h3>
</div>
</template>
<script>
export default {
}
</script>
然后再路由模块中修改代码,添加 {path:"*",component:NotFind}
:
注意 :一定要放到路由注册得最底部,因为vue找路由路径是从上往下找,而这个*
代表所有路径都可以匹配,要让它找完前面所有的路由,才表示没有,最后匹配404页面。
javascript
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 (以后上线需要服务器端支持)
javascript
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({
//设置模式为history
mode:"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;
修改之后浏览器地址栏: