Vue-router路由的简单创建

1. 安装

安装vue-router插件包

npm install vue-router --save

如果在一个模块化工程中使用它，必须要通过Vue.use()明确的安装路由功能（后面/router/index.js文件里会用到）

2. 使用

以下案例在vue-cli的webpack项目中使用vue-router

1）创建组件页面

创建我们需要路由的组件页面，新建一个名为src/views的目录专门放置我们开发的Vue组件，在src/views目录下创建Main.vue和Products.vue的组件，代码如下：

//Main.vue
<template>
    <div>首页</div>
</template>

<script>
    export default {
        name: "Main"
    }
</script>

<style scoped>

</style>


//Products.vue
<template>
    <div>商品列表</div>
</template>

<script>
    export default {
        name: "Products"
    }
</script>

<style scoped>

</style>

2)安装路由

创建一个名为src/router的目录专门放置我们的路由配置代码，在src/router目录下创建一个名为index.js的路由配置文件，代码如下：

import Vue from 'vue'
//导入路由插件
import Router from 'vue-router'
//导入定义的组件
import Main from '../views/Main'
import Products from '../views/Products'

//安装路由
Vue.use(Router);
//配置路由
export default new Router({
  routes:[
    {
      //路由路径
      path: '/main',
      //路由名称
      name:Main,
      //跳转到组件
      component:Main
    },
    {
      //路由路径
      path:'/products',
      //路由名称
      name:Products,
      //跳转到组件
      component: Products
    }
  ]
});

3）配置路由

修改main.js入口文件，增加配置路由的相关代码

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

//导入router目录下的index.js创建的路由配置目录
import router from './router'

//导入elementUI的依赖
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //配置路由
  router,
  render: h => h(App)
})

4）使用路由

修改App.vue组件，代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">

    <router-link to="/main">点击进入首页</router-link>
    <router-link to="/products">点击进入商品列表</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',

}
</script>

<style>

</style>

说明：

• router-link：默认会被渲染成一个< a>标签，属性为指定链接
• router-view：用于渲染路由匹配到的组件