初识vue.js，我的学习之路（六）

    vue中的路由

 vue-router是一个插件所以我们要先进入项目文件去下载它

                       npm install vue-router --save-dev                      

 在src的同级目录下新建 router 文件夹，在里面再新建一个index.js文件夹，这里面放的是路由的配置。

  在src的同级目录下新建components，这里面放的是各种.vue文件，也就是组件。

//这里是路由的配置

import HomeView from '../components/HomeView.vue'
import NewsView from '../components/NewsView.vue'
import MyView from '../components/MyView.vue'

export default{
    routes:[
        {path:"/home",component:HomeView},
        {path:"/news",component:NewsView},
        {path:"/my",component:MyView}
    ]

}

 

在main.js中引入所需的文件，实例化router并挂载到vue这个对象中

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

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


var router = new VueRouter(index)

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

在App.vue中写入以下代码

<template>
  <div id="app">
    
      <div>
        <router-view></router-view> 
      </div>

      <ul>
        <li><router-link to="/home">首页</router-link></li>
        <li><router-link to="/news">新闻</router-link></li>
        <li><router-link to="/my">我的</router-link></li>
      </ul>
    
  </div>
</template>