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

声明式导航(跳转传参)

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

跳转传参分为:

  1. 查询参数传参

    直接在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>
  1. 动态路由传参
    动态路由传参就是在路由规则上面做手脚。

在路由配置中:

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;

修改之后浏览器地址栏:

相关推荐
喵叔哟几秒前
重构代码中引入外部方法和引入本地扩展的区别
java·开发语言·重构
狸克先生4 分钟前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
尘浮生7 分钟前
Java项目实战II基于微信小程序的电影院买票选座系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
sinat_384241097 分钟前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
baiduopenmap19 分钟前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图
hopetomorrow21 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
loooseFish27 分钟前
小程序webview我爱死你了 小程序webview和H5通讯
前端
小牛itbull30 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i39 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_42 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js