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

短命女 2023-10-15 18:06 14阅读 0赞

### 声明式导航(跳转传参) ###

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

##### **跳转传参分为：** #####

1.  ***查询参数传参***。  
    ![在这里插入图片描述][052d3d531ff34b3ca0230942698347d4.png_pic_center]  
    直接在router-link标签的to属性像get请求方式一样传参数：

跳转的页面获取参数直接使用：模板语法`{ { $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>

1.  ***动态路由传参***。  
    动态路由传参就是在路由规则上面做手脚。  
    ![在这里插入图片描述][79844cbbe8a84c408310690e0a691f03.png_pic_center]

在路由配置中：

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;

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

<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},

***两种方式的优点***：  
![在这里插入图片描述][274e4f8e175242f7acbb7c2a3789b0db.png_pic_center]

### 路由重定向 ###

在项目启动时，页面的内容时空的，因为他的路径是下图这样的：  
![在这里插入图片描述][8e8a3e8105f74af690eadfda36ed263e.png_pic_center]  
那我们如何将这个默认路由改为首页的路由，让页面刚进入的时候就重定向到首页呢？  
![在这里插入图片描述][3ac8fe6986344831af05f2cd9fa0cfd0.png_pic_center]  
修改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 ###

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

<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路由模式设置 ###

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

**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({
        
    //设置模式为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;

修改之后浏览器地址栏:  
![在这里插入图片描述][5f422815b3af4350a286e0efba321887.png_pic_center]

[052d3d531ff34b3ca0230942698347d4.png_pic_center]: https://img-blog.csdnimg.cn/052d3d531ff34b3ca0230942698347d4.png#pic_center
[79844cbbe8a84c408310690e0a691f03.png_pic_center]: https://img-blog.csdnimg.cn/79844cbbe8a84c408310690e0a691f03.png#pic_center
[274e4f8e175242f7acbb7c2a3789b0db.png_pic_center]: https://img-blog.csdnimg.cn/274e4f8e175242f7acbb7c2a3789b0db.png#pic_center
[8e8a3e8105f74af690eadfda36ed263e.png_pic_center]: https://img-blog.csdnimg.cn/8e8a3e8105f74af690eadfda36ed263e.png#pic_center
[3ac8fe6986344831af05f2cd9fa0cfd0.png_pic_center]: https://img-blog.csdnimg.cn/3ac8fe6986344831af05f2cd9fa0cfd0.png#pic_center
[de4d5b13a0ce45108a3ed00f59ee35d7.png_pic_center]: https://img-blog.csdnimg.cn/de4d5b13a0ce45108a3ed00f59ee35d7.png#pic_center
[d588275f836c44f0abc676dd56125fad.png_pic_center]: https://img-blog.csdnimg.cn/d588275f836c44f0abc676dd56125fad.png#pic_center
[5f422815b3af4350a286e0efba321887.png_pic_center]: https://img-blog.csdnimg.cn/5f422815b3af4350a286e0efba321887.png#pic_center