【Vue】路由嵌套传递参数路由钩子

最新推荐文章于 2023-03-30 18:58:16 发布

高朗

最新推荐文章于 2023-03-30 18:58:16 发布

阅读量380

点赞数

文章标签： vue 路由嵌套路由钩子重定向 axios

本文链接：https://blog.csdn.net/qq_43466788/article/details/110920056

版权

文章目录

路由嵌套
路由传递参数
重定向
路由模式
404页面设置
路由钩子
异步请求

路由嵌套

嵌套路由又称子路由，在实际应用中，通常由多层嵌套的组件组合而成。
搭建好环境进行测试：【Vue】ElementUI在vue-cli程序中的使用
代码测试：
路由js文件：index.js （路由嵌套就是在原有的路由下添加路由，在原有·路由children属性下添加路由）

import Vue from 'vue'
//安装vue-router后导入进来
import VueRouter from 'vue-router'

//导入组件
import Login from '../views/Login'
import Main from '../views/Main'

import List from '../views/user/List'
import Profile from '../views/user/Profile'

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/login',
      name: 'login',
      //跳转的组件
      component: Login
    },
    {
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main,
      //子路由
      children:[
        {path: '/user/profile',component: Profile},
        {path: '/user/list',component: List}
      ]
    }
  ]
});

/main下嵌套两个路由：
在这里插入图片描述
嵌套两个路由的Main.vue组件

<template>
  <el-container>
    <el-aside width="200px">
      <el-menu :default-openeds="['1']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
          <el-menu-item-group>
            <el-menu-item index="1-1">
              <!--嵌套路由1-->
              <router-link to="/user/profile">个人信息</router-link>
            </el-menu-item>
            <el-menu-item index="1-2">
              <!--嵌套路由2-->
              <router-link to="/user/list">用户列表</router-link>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
          <el-menu-item-group>
            <el-menu-item index="2-1">分类管理</el-menu-item>
            <el-menu-item index="2-2">内容列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right:15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>个人信息</el-dropdown-item>
            <el-dropdown-item>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main>
        <!--路由组件显示-->
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    name: "Main"
  }
</script>




<style scoped>
  .el-header {
    background-color: #048bd1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

根组件App.vue

<template>
  <div id="app">
    <router-link to="/main">首页</router-link>
    <router-link to="/login">登录</router-link>
    <!--展示组件-->
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

演示：

在这里插入图片描述

路由传递参数

看到前面Main.vue中路由：<router-link to="/user/profile">个人信息</router-link>中是没有传递参数的。
怎样传参？
在路由标签的属性to中加参数：name是路由名字，并不是path，params是参数。同时to属性要通过v-bind绑定

<router-link :to="{name: 'Profile',params: {id: 1}}">个人信息</router-link>

对应路由设置也需要修改/router/index.js
我们只需要在对应的路由下加上对应的参数名：/user/profile/:id，同时这里路由的name对应上面标签to属性中的name

{
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main,
      //子路由
      children:[
        {path: '/user/profile/:id',component: Profile,name: 'Profile'},
        {path: '/user/list',component: List}
      ]
    }

在个人信息组件接收到参数并显示: {{$route.params.id}}

<template>
    <div>
      <h1>个人信息</h1>
      {{$route.params.id}}
    </div>
</template>

<script>
    export default {
        name: "Profile"
    }
</script>

<style scoped>

</style>

测试：
另外一种接受参数的方法：前面是通过 {{$route.params.id}}

这里设置我们传递参数的路由中设置：props: true

    {
      //路由路径
      path: '/main',
      name: 'main',
      //跳转的组件
      component: Main,
      //子路由
      children:[
        {path: '/user/profile/:id',component: Profile,name: 'Profile',props: true},
        {path: '/user/list',component: List}
      ]
    }

然后在组件中取参数：组件设置属性props: ['id']，然后直接取{{id}}

<template>
    <div>
      <h1>个人信息</h1>
      {{id}}
    </div>
</template>

<script>
    export default {
        props: ['id'],
        name: "Profile"
    }
</script>

<style scoped>

</style>

重定向

直接在路由配置中配置path和重定向的路径redirect即可

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路由路径
      path: '/login',
      name: 'login',
      //跳转的组件
      component: Login
    },
    {
      //重定向
      path: '/gotoMain',
      redirect: '/main'
    }
  ]
});

路由模式

路由模式有两种：

hash: 路径带#符号，http://localhost/#/login
history:路径不带#符号，http://localhost/login

默认的是hash，怎样修改成history,在路由配置中设置即可：

import Vue from 'vue'
//安装vue-router后导入进来
import VueRouter from 'vue-router'


//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
//修改路由模式
  mode: 'history',
  routes: [
  ]
});

404页面设置

定义404的组件，NotFind.vue

<template>
    <div>
      <h1>404</h1>
    </div>
</template>

<script>
    export default {
        name: "NotFind"
    }
</script>

<style scoped>

</style>

配置路由，path为*即可

import NotFind from '../views/NotFind'

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '*',
      component: NotFind
    }
  ]
});

路由钩子

beforeRouteEnter：在进入路由前执行
beforeRouteEnter：在离开路由前执行
具体使用方法：

<template>
    <div>
      <h1>用户列表</h1>
    </div>
</template>

<script>
    export default {
        name: "List",
        beforeRouteEnter: (to,from,next)=>{
          console.log("进入路由之前");
          next();
        },
      beforeRouteLeave: (to,from,next)=>{
        console.log("离开路由之前");
        next();
      }
    }
</script>

<style scoped>

</style>

参数说明：

to:路由将要跳转的路径信息.
from:路径跳转前的路径信息.
next:路由的控制参数
- next()跳入下一个页面
- next('/path')改变路由的跳转方向，使其跳到另一个路由
- next(false)返回原来的页面
- next((vm)=>{})仅在 beforeRouteEnter中可用，vm是组件实例

异步请求

安装Axios：npm install --save axios vue-axios
在main.js引用Axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

准备数据：只有static目录下的文件可以被访问到，把数据放在static目录下。
static/mock/data.json

{
  "name":"高朗",
  "url": "https://blog.csdn.net/qq_43466788",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "CSDN",
      "url": "https://blog.csdn.net/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

拿到数据，打印到控制台，利用钩子函数，在进入路由前拿到数据，至于怎样把数据渲染到页面上，可以看博客【Vue】Vue基础语法知识的第九点。

<template>
    <div>
      <h1>用户列表</h1>
    </div>
</template>

<script>
    export default {
        name: "List",
        beforeRouteEnter: (to,from,next)=>{
          console.log("进入路由之前");
          next(vm => {
            //进入路由之前拿到数据
            vm.getData();
          });
        },
      beforeRouteLeave: (to,from,next)=>{
        console.log("离开路由之前");
        next();
      },
      methods:{
          getData: function () {
            this.axios({
              method: 'get',
              url: 'http://localhost:8080/static/mock/data.json'
            }).then(function (response) {
              console.log(response)
            });
          }
      }
    }
</script>

<style scoped>

</style>