vue-router的基本使用

前言

学习vue路由是必不可少的，vue-router组件是官方推荐使用的，是vue的核心组件；
一般使用vue-router做导航菜单和各种页面组件你的切换；

安装

npm install vue-router --save

使用上面的命令在vue项目中引入vue-router组件

使用

项目的结构大致如图所示

首先在router目录下的index.js，注册路由并配置相关的路由

import Router from 'vue-router'
Vue.use(Router);//注册路由

需要注意的是配置多个路由时使用routes,而不是routers，千万别写错了

index.js 的完整代码

/*
路由器配置
 */
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index'
import Menu1 from '../pages/Menu1'

Vue.use(Router);//注册路由

export default new Router({
  routes: [{
      path: '/',
      redirect:"/Index"
    },
    {
      path: '/Index',
      component: Index
    },
    {
      path: '/menu1',
      component: Menu1
    }
  ]
})

然后在main.js文件里引用index.js文件

import router from './router'//相当于import router from './router/index.js'

可以使用简写，index.js就不用写了，系统默认能找到

main.js完整代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'


new Vue({
	el:'#app',
	router,
	components:{
		App
	},
	template:'<App/>'
})

在App.vue中使用 router-link 指定跳转的组件，用router-view接收跳转组件的内容

App.vue的完整代码

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div class="menu">
      <ul>
        <li>
          <router-link to="/Index">首页</router-link>
        </li>
        <li>
          <router-link to="/menu1">菜单1</router-link>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
  </div>
 </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  ul li{
    float: left;
    padding-left: 20px;
    list-style-type: none;
  }
  .content{
    clear: both;
    padding-left: 20px;
  }
</style>

Index.vue的完整代码

<template>
  <div>
    首页的内容
  </div>
</template>

<script>
  export default{
    name:'Index'
  }
</script>

<style>
</style>

Menu1.vue的完整代码

<template>
  <div>
    菜单1的内容
  </div>
</template>

<script>
  export default{
    name:'Menu1'
  }
</script>

<style>
</style>

最后使用指令运行项目

npm run dev

看到的效果如下