vue-router 参数传递和重定向

vue跳转路径时怎么进行参数传递

参考：https://router.vuejs.org/zh/guide/essentials/passing-props.html

代码演示

index.js路由js配置参数：

import Vue from 'vue'
import Router from 'vue-router'

import Main from "../views/Main"
import Login from "../views/Login"

import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
    routes: [
      {
        path: '/main',
        //注意component不要写成components了！！！！
        component: Main,
        //嵌套路由
        children: [
          {
            //通过:id来接收参数，还有对象就可以通过:id/:name/:age这样来接收
            path: '/user/profile/:id',
            name: "UserProfile",
            component: UserProfile,
            props: true
          },
          {path: '/user/list', component: UserList}
        ]
      },
      {
        path: '/login',
        component: Login
      },
      {
        //配置重定向
        path: '/goHome',
        redirect: '/main'
      }
    ]
});

分析：这里有两种方式，对应取值有两种：

看这里的路径配置：path: ‘/user/profile/:id’
明显配置了id参数
这里需要给路由配置路径取相应的名字了，因为页面获取路由调用时要通过名字获取了
第一种接收参数id的值是通过调用$route.params.id
props: true 就是允许以第二种方式用props方式接收参数id的值

看main.vue的代码：

<template>
  <div>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
      <template slot="title">我的工作台</template>
      <el-menu-item index="2-1">选项1</el-menu-item>
      <el-menu-item index="2-2">选项2</el-menu-item>
      <el-menu-item index="2-3">选项3</el-menu-item>
      <el-submenu index="2-4">
        <template slot="title">选项4</template>
        <el-menu-item index="2-4-1">选项1</el-menu-item>
        <el-menu-item index="2-4-2">选项2</el-menu-item>
        <el-menu-item index="2-4-3">选项3</el-menu-item>
      </el-submenu>
    </el-submenu>
    <el-menu-item index="3" disabled>消息中心</el-menu-item>
    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    <!--    嵌套路由： -->
    <el-menu-item index="5">
<!--      name:传组件名，params:传递参数 需要对象 需要通过v-bind绑定-->
      <router-link :to="{name:'UserProfile',params:{id: 1}}">个人信息</router-link>
    </el-menu-item>
    <el-menu-item index="6">
      <router-link to="/user/list">用户列表</router-link>
    </el-menu-item>
    <el-menu-item index="7">
      <router-link to="/goHome">回到首页</router-link>
    </el-menu-item>
  </el-menu>

    <div style="margin-top: 20px; height: 200px;">
      <el-collapse-transition>
          <router-view/>
      </el-collapse-transition>
    </div>
  </div>

</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      show3: true
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>

</style>

分析main.vue

这一句就是由路由传递参数时的写法

 <!--    嵌套路由： -->
    <el-menu-item index="5">
<!--      name:传组件名，params:传递参数 需要对象 需要通过v-bind绑定-->
      <router-link :to="{name:'UserProfile',params:{id: 1}}">个人信息</router-link>
    </el-menu-item>

profile.vue组件自己获取参数

<template>
<!--  所有的元素，必须不能直接再根节点上，要再标签里面-->
  <div>
    <h1>个人信息</h1>
    {{$route.params.id}}
    {{id}}
  </div>

</template>

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

<style scoped>

</style>

可以看到有两种方式，第二种就需要在router包下的index.js里面配置 props: true

测试：npm run dev

http://localhost:8080/#/user/profile/1

http://localhost:8080/#/user/profile/456

重定向

1、在router包下的index.js里面配置重定向路由

{
//配置重定向
path: ‘/goHome’,
redirect: ‘/main’
}

import Vue from 'vue'
import Router from 'vue-router'

import Main from "../views/Main"
import Login from "../views/Login"

import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
    routes: [
      {
        path: '/main',
        //注意component不要写成components了！！！！
        component: Main,
        //嵌套路由
        children: [
          {
            //通过:id来接收参数，还有对象就可以通过:id/:name/:age这样来接收
            path: '/user/profile/:id',
            name: "UserProfile",
            component: UserProfile,
            props: true
          },
          {path: '/user/list', component: UserList}
        ]
      },
      {
        path: '/login',
        component: Login
      },
      {
        //配置重定向
        path: '/goHome',
        redirect: '/main'
      }
    ]
});

分析，只用配置path为来源路径，而redirect配置你要去的路径就可以了！！！

解决路径带#问题：http://localhost:8080/#/user/list

给路由配置
mode: “history”,


参考：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90