vue-router路由入门

vue-router路由入门

一、作用：

可以实现单页面应用，就是不用跳转页面，而实现在同一个页面，局部更新内容

二、使用：

2.1、需要下载

npm i vue-router

2.2 引入vueRouter

import VueRouter from 'vue-router'
Vue.use(VueRouter)

2.3配置router路由跳转路径

const routes = [
  
  
  {
    path: '/',
    name:'用户管理',
    component: ()=>import('../views/userManage.vue'),
    redirect:"/user",//优先显示哪个子路由组件
    children:[
      {path:'home',name:'首页',
      	component:()=>import('../views/userHome.vue')},
      {path:'user',name:'用户管理',
          component:()=>import('../views/userUser.vue')}
    ]
    

  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/userAbout.vue')
  },
  {
    path: '/userLogin',
    name: 'userLogin',
    component: () => import('../views/userLogin.vue')
  }

]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:routes //使用上面定义的routes
})

//暴露router
export default router

2.4用展示路由组件

   <el-container>
      <el-header>
      ......
      </el-header>
      <el-main>
<!--        表示当前页面的子路由会在 <router-view /> 里面展示-->
        <router-view></router-view>
      </el-main>


    </el-container>

2.5 可以跳转到指定路由，另外在element组件中，可以使用index="/userLogin"跳转指定路由

<router-link to="/userLogin">登录</router-link>

//在element组件中，可以使用index="/userLogin"跳转
   <el-menu-item index="/userLogin">
      <template slot="title">
        <i class="el-icon-house"></i>
        <span slot="title">
          <router-link to="/userLogin">登录</router-link>
        </span>
      </template>
    </el-menu-item>

如果有帮助的话，麻烦点个赞