vue路由完成页面跳转

在项目中会有页面跳转的功能，跳转不同的界面加载不同的内容，所以需要页面跳转。 （1）书写页面路由

import Vue from 'vue' import VueRouter from 'vue-router' import HomeMain from '../components/home-main' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/home-main' }, { path: '/home-main', component: HomeMain, children: [ { path: '/news-list', component: () => import('../components/contributor/news-list.vue') }, { path: '/integral-details', component: () => import('../components/contributor/integral-details.vue') }, { path: '/course', component: () => import('../components/contributor/course.vue'), }, { path: '/topic/', component: () => import('../components/contributor/topic.vue') }, { path: '/topicList/', component: () => import('../components/contributor/topicList.vue') } ] }, { path: '/person-info', component: () => import('../components/person-info') }, { path: '/test', component: () => import('../components/testGit.vue') } ] const router = new VueRouter({ routes }) export default router

（2）设置跳转的地址

<template slot="title"> <!-- 图标 --> <i :class="iconsObj[item.id]"></i> <!-- 文本 --> <!--设置跳转的地址 --> <router-link tag="span" :to="{path:'/course',query:{courseId:item.id}}">{{item.courseName}}</router-link> </template>

补充：

slot：插槽可以分为三种插槽（具名插槽，作用域插槽，默认插槽）插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

tag： tag作用：router会有默认的格式，tag标签能够去掉固有的格式

：to跳转的路由地址 当点击同一功能需要页面但是需要页面刷新是可以使用监听