router-link 与router-view

在Vue中这两者相互依存, router-link 对应 html 中的a 标签,但是与a 标签不同的是,跳转的时候并不会刷新页面,

而router-view 相当于router-link的承载页面,用于展示router-link 的的内容

官网
router-link 的一些用法:
props:
to

一种是编程式导航,一种为路由式导航

1. • 对于在pc端的页面更加明显的是子路由, 即在一个页面一部分导航的主体不会改变, 随着点击导航栏,内容主体的发生变化,切换到不同的组件中去(这就需要在子路由中注册,否则是不会生效的)

   • 亦或者是在不同的页面中引入同一个组件去解决问题(引入组件的方式就不用在路由中注册已达到完成的目的)

总结一下: 1.一种是组件化的思维, (可能会造成页面的加载闪烁)
2. 一种是子路由的嵌套的思维(需要使用router-link, router-view来进行承载)

一个完整的路由配置

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

Vue.use(VueRouter)

const routes = [
  {
    
    
    path: '/',
    name: 'Home',
    // alias:'/about',
    component: ()=>import('../views/Navbar/Home.vue'),
    children:[
      {
    
    
        path: '/about',
        name: 'About1',
        component: () => import('../views/Navbar/About.vue')
      },
      {
    
    
        path: '/toast',
        name: 'Toast1',
        component: () => import('../views/Navbar/Toast.vue')
      },  
      {
    
    
        path: '/breadcrumb',
        name: 'Breadcrumb1',
        component: () => import('../views/Navbar/Breadcrumb.vue')
      },  
      {
    
    
        path: '/test1',
        name: 'tset1',
        component: () => import('../views/test.vue')
      },  
      {
    
    
        path: '/test',
        name: 'Test1',
        component: () => import('../views/Navbar/ElementTest.vue')
      }
    ]
  },
  {
    
    
    path:'/404',
    name:'NotFound',
    hidden:true,
    component:()=>import('../views/404.vue')
  },
  
  {
    
    
    path: '*',
    hidden: true,
    redirect: {
    
     path: '/404' }
}
]

const router = new VueRouter({
    
    
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router