vue-4-2-跳转路由

1. router-link标签跳转

<template>
  <div id="app">
    <router-link to="/home" tag="button" replace active-class="test">首页</router-link>
    <router-link to="/about" replace>关于</router-link>
    <router-link to="/user" replace>用户</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


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

<style>
  .test{
    color: yellow;
  }
</style>

 

2. 使用代码跳转

<template>
  <div id="app">
    <button @click="homeClick">其它</button>
    <button @click="aboutClick">飞走</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
　　// 使用push跳转，有历史记录，router-link标签默认使用
    homeClick(){
      this.$router.push('/home')
      console.log(this.$router)
    },
　　// 使用replace跳转，不会保留记录，router-link中增加replace属性可改为次方法
    aboutClick(){
      this.$router.replace('/about')
      console.log('aboutClick')
    }
  }
}
</script>

<style>
  .test{
    color: yellow;
  }
</style>

 

3. 动态路由，路由跳转时，路由条目后跟动态参数

index.js中路由条目：

{
        path: '/user/:userId',
        component: User
    }

使用时：

<template>
  <div id="app">
    <router-link :to="/user/ + userId" replace>用户</router-link>
    <router-view></router-view>
  </div>
</template>

export default {
  name: 'App',
  data(){
    return{
      userId: 'zhangsan'
    }
  },
  methods:{
 
  }
}

增加需求：如想在跳转用户界面时，.vue中拿到并显示用户名

user.vue模板中：

　　注：this.$router 表示获取index.js中导出的router对象

　　　　this.$route表示获取当前活跃的路由，params是其中的参数，userID表示路由条目中定义的动态参数名

<template>
  <div>
    <h2>我是user</h2>
    <p>user 内容</p>
    <h3>{{userId}}</h3>
  </div>
</template>

<script>
export default {
  name: "User",
  computed:{
    userId(){
      return this.$route.params.userId
    }
  }
}
</script>

<style scoped>

</style>

 

4. 路由的懒加载： 用到时再加载

　　1. 使用这种方法导入的路由模板，在打包时会将不同的路由信息打包到不同的js文件中，而不是同一个js中，这样在导入路由时，就不会一次性全部加载。

　　2. 代码层面上看，就是在使用某个路由条目时，才会使用某个模板对象（Home, About, User）,该对象才会将某个路由模板导入

import VueRouter from "vue-router";
import Vue from "vue";
import home from "../components/Home";

// import Home from "@/components/Home";
// import About from "@/components/About";
// import User from "@/components/User";

// 路由的懒加载
const Home = () => import("@/components/Home");
const About = () => import("@/components/About");
const User = () => import("@/components/User");

Vue.use(VueRouter);

const routes = [
    {
        path: '',
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    },
    {
        path: '/user/:userid',
        component: User
    }
]

const router = new VueRouter({
    routes,
    mode: "history",
    linkActiveClass: 'test2'
})


export default router