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跳轉的路由地址
當點擊同一功能需要頁面但是需要頁面刷新是可以使用監聽