Vue从入门到实在：模块化开发使用路由

模块化开发使用路由

模块化开发使用路由也是遵照前一节介绍的各个步骤，只是形式上有些变化。

安装模块

在项目本身目录执行

npm install vue-router@3

这时会看到node_modules目录下多了一个vue-router目录。

注：vue2 对应的是vue-router 3版本。

设置导航

在App.vue中设置导航链接和组件渲染位置

<template>
  <div id="app">
    <p>

      <router-link to="/news">新闻</router-link>
      <router-link to="/books">图书</router-link>
      <router-link to="/videos">视频</router-link>

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

<script>
export default {
  name: 'app',
  components: {
  }
}
</script>

<style>
/*#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}*/
</style>

定义路由组件

在components目录下新建News.vue ,Books.vue , Videos.vue 三个文件

News.vue:

<template>
    <div>新闻页面</div>
</template>

<script>
export default {
    data(){
        return {}
    }
}
</script>

Books.vue:

<template>
    <div>图书页面</div>
</template>

<script>
export default {
    data(){
        return {}
    }
}
</script>

Videos.vue:

<template>
    <div>视频页面</div>
</template>

<script>
export default {
    data(){
        return {}
    }
}
</script>

配置路由信息

单独定义一个模块文件，配置路由信息。

在src目录下新建一个router文件夹，在该文件夹下新建一个index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'  // 导入vue-router
import News from '@/components/News'
import Books from '@/components/Books'
import Videos from '@/components/Videos'


Vue.use(VueRouter)  //安装vue-router插件

// 将VueRouter实例作为模块的默认导出
const router = new VueRouter({

  routes: [
    {
      path: '/news',
      component:News
    },
    {
      path: '/books',
      component:Books
    },
    {
      path: '/videos',
      component:Videos
    },
  ]
})

export default router;

注入VueRouter实例

main.js:

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')