Vue 路由传参的方式和title修改最LOW方式Or 导航守卫

路由传参的2种类型:params 和query

一. params 的类型

1.配置路由格式:/router/:id

实际截图:

image.png

2.传递的方式: 在path后面跟上对应的值

实际截图:

image.png

3. 传递后形成的路径:/router/123 ,,,,, /router/abc

实际截图:

image.png

4. 在当前页面取值的方式

实际截图

image.png

二. query类型参数

(1) router.js配置

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../components/Home.vue');
const User = () => import('../components/User.vue')
const Profile = () => import('../components/Profile.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/user/:userId',
    component: User
  },
  {
    path:'/profile',
    component:Profile
  }

]

const router = new VueRouter({
  routes,
  mode: "history",

  linkActiveClass: "active"
})

export default router

实际截图:

image.png

(2)App.js中的写法

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>

    <router-link :to="'/user/' + userId">用户</router-link>

    <!-- <router-link to="/profile">档案</router-link> -->
    <router-link :to="{ path: '/profile',query:{name:'huzhenchu',age:18,height:1.88} }">档案</router-link>

    <router-view />
  </div>
</template>
    
<script>
export default {
  name: "App",
  data() {
    return {
      userId: "huzhenchu",
    };
  },
  methods: {},
};
</script>


<style lang="less">
.active {
  color: red;
}
</style>

实际截图:

image.png

(3)去当前 页面取值 Profile.vue 页面取值

<template>
  <div>
    <h2>我是Profile组件</h2>
    <!-- 取出参数 -->
    <h2>{{ $route.query }}</h2>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>

实际截图:

image.png

三 以上都是使用<router-link to="...">实现 现在我用button来实现:

button 实现:

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>

    <router-link :to="'/user/' + userId">用户</router-link>

    <!-- <router-link to="/profile">档案</router-link> -->
    <router-link
      :to="{
        path: '/profile',
        query: { name: 'huzhenchu', age: 18, height: 1.88 },
      }"
      >档案</router-link
    >

    <hr />
    <h2>按钮实现</h2>
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>

    <router-view />
  </div>
</template>
    
<script>
export default {
  name: "App",
  data() {
    return {
      userId: "huzhenchu",
    };
  },
  methods: {
    // 路由实现params 传参
    userClick() {
      this.$router.push("/user/" + this.userId);
    },
    // 路由实现query 传参
    profileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "chuchuhu",
          age: 19,
          height: 30,
        },
      });
    },
  },
};
</script>


<style lang="less">
.active {
  color: red;
}
</style>

params button按钮传参实际截图

image.png

query button按钮传参实际截图:

image.png

三.title修改最LOW方式实际截图:

image.png

四.导航守卫

import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () => import('../components/Home.vue');
const User = () => import('../components/User.vue')
const Profile = () => import('../components/Profile.vue')

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: '/home'
  },
  {
    path: '/home',
    meta: {
      title: '首页'
    },
    component: Home
  },
  // 1.动态路由的配置,这种配置的方式叫做 params 传参
  {
    path: '/user/:userId',
    meta: {
      title: '用户'
    },
    component: User
  },
  {
    path: '/profile',
    meta: {
      title: '档案'
    },
    component: Profile
  }

]

const router = new VueRouter({
  routes,
  mode: "history",

  linkActiveClass: "active"
})

// 全局导航守卫
router.beforeEach((to, from, next) => {
  console.log(to)
  //从 from 跳转到to 
  document.title = to.matched[0].meta.title
  next() // 这个是必须要调用的 不调用 就不能路由跳转
})

export default router

实际截图:

image.png