Vue-router的使用

1.   首先引入vue-router（可以指定版本）  

   npm i vue-router@3.2.0

2.   配置路由

2.1   创建路由表

在src下创建router文件夹，里面创建index.js 此时该文件就是一个路由表

注意：const声明的变量名必须为routes 要不然会导致后面<router-view></router-view>不渲染

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

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name:'Home',
        component: () => import('../views/Home.vue')
    },
    {
        path: '/user',
        name:'User',
        component: () => import('../views/User.vue')
    },
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

2.2   在main.js 中配置路由表

import Vue from 'vue'

import App from './App.vue'

import {Button,Radio} from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

import router from '../router' 

Vue.config.productionTip = false

Vue.use(Button)

Vue.use(Radio)

new Vue({

  router,

  render: h => h(App),

}).$mount('#app')

2.3 项目中创建views文件夹 新建 Home.vue  User.vue

<template>

    <div>

        <h2>我是User页面</h2>

    </div>

</template>

<script>

export default {

    name: 'User',

    data(){

    return{}

    }

}

</script>

<template>

    <div>

        <h2>我是Home页面</h2>

    </div>

</template>

<script>

export default {

    name: 'Home',

    data(){

    return{}

    }

}

</script>

2.3  src  components文件夹下的  HelloWorld.vue 组件

<template>

  <div class="hello">

    <router-link to="/">

     <el-button>按钮</el-button>

    </router-link>

    <router-link to="/user">

    <el-button type="primary">按钮</el-button>

    </router-link>

    <el-radio v-model="radio" label="1">备选项</el-radio>

   </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

      return {

        radio: '0'

      }

  },

  props: {

    msg: String

  }

}

</script>

<style scoped>

</style>

2.4   在App.vue中创建路由视图

<template>

  <div id="app">

    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <router-view></router-view>

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {

  name: 'App',

  components: {

    HelloWorld

  }

}

</script>

<style>

</style>

 3、页面效果

点击默认按钮显示Home.vue页面   点击基础按钮User.vue页面