Vue之路由

小灰灰 2022-04-18 00:10 235阅读 0赞

**默认的配置文件为router.js**

import Vue from 'vue'
    import Router from 'vue-router'
    import Home from './views/Home.vue'
    
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [
        {
          path: "/", 
          redirect: '/home' //重定向
        },
        {
          path: '/home', //路径
          name: 'home', //名称
          component: Home //vue组件名称
        },
        {
          path: '/about',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
        }
      ]
    })

**路由链接：router-link to可以写router.js指定好的名称或者路径名，tag指定标签，默认为a标签**

<router-link to="home">首页 \</router-link>
    <router-link to="about">关于</router-link>

**默认a标签：**  
![在这里插入图片描述][20181105204601958.png]  
**tag指定为li标签**

<router-link to="home" tag="li">首页 \</router-link>
      <router-link to="about" tag="li">关于</router-link>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]

**动态路由：router-view，加上去可以实现路径的跳转：**

[20181105204601958.png]: /images/20220418/a564e1ec49454158b89f2c5f2218c440.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]: /images/20220418/94ed69f629414f8ea463303adc665f13.png