Vue-router

Vue-router 基本使用

主要用法

//安装
npm install --save vue-router

//引入
main.js
import VueRouter from 'vue-router';
Vue.use(Vuerouter);

const Routers = [
  {
	path:'/path',
    <!-- component: () => import('@/page/about') -->
    //异步组件按需加载
    component:(resolve) => require(['./views/about.vue'],resolve)
 },
  {
  	path:'/about',
    component:(resolve) => require(['./views/about.vue'],resolve)
  }
];

//index.vue

<template>
	<div>首页</div>
</template>
<script>
	export default{

	}
</script>

//about.vue
<template>
  <div>介绍页</div>
</template>
<script>
export default {

}
</script>

params 和 query 传参

<div class="course-item" v-for="course in courses" :key="course.id">
  <router-link :to="{name:'CourseShow',params:{id:course.id},query:{page:10}}">
    <img :src="course.img" width="240" alt="" />
    <h5>{{course.name}}</h5>
    <span>价格:{{course.price}}元</span>
  </router-link>
</div>
//获取参数 this.$route.params.id this.$route.query.page

组件跳转

方法 1

<template>
  <div>
    <h1>首页</h1>
    <router-link to="/about">跳转到</router-link>
    replace 不会留下History记录，所以导航不能后退
    <router-link to="/about" replace></router-link>
  </div>
</template>

方法 2

<template>
  <div>
    <h1>介绍页</h1>
    <button @click="handleRouter">跳转到user</button>
  </div>
</template>
<script>
  export default {
    methods: {
      handleRouter() {
        this.$router.push("/user/123");
        //第三种
        //this.$router.replace('/user/123');
      },
    },
  };
</script>

$router 其他方法

this.$router.go(-1); 返回上一级

赏

感谢观看