Vue2的使用

路由

步骤

1、安装依赖

npm i vue-router@3

2、创建路由文件

First.vue

  <template>
     <div>111111</div>
  </template>

  //必须有下面这部分，否则组件不生效
  <script>
     export default{
          name:'FirsT'  //有时vue设置严格模式,需要为小驼峰
     }
  </script>

Second.vue

  <template>
     <div>22222</div>
  </template>
  <script>
     export default{
          name:'SecOnd' 
     }
  </script>

3、设置链接及展示区

App.vue

<template>
   <router-link to='/first'>First</router-link>
   <router-link to='/second'>Second</router-link>

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

4、创建router.js路由模块

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

import First from './first.vue'
import Second from './second.vue'

Vue.use(VueRouter)

const router=new VueRouter({
               routes:[
                       {path:'/first',component:First},
                       {path:'/second',component:Second},
                      ]
                          })

export default router

5、在main.js导入并挂载路由

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

import router from './router'


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