vue-cli3路由vue-router用法

Posted 2020-11-30 aaronthon

安装

npm install vue-router

导入vue-router

// main.js文件内
// 导入vue-router
import Vue from ‘vue‘  // vue-router是以来vue的
import VueRouter from ‘vue-router‘  // 导入vue-router，注意import VueRouter 不能写成 import Vue-Router，因为不支持带-的写法。
// 必须要通过 Vue.use() 明确地安装路由功能
Vue.use(VueRouter)

// main.js
// 如果使用全局的script标签就无需使用上述导入vue-router方法手动安装路由功能Vue.use()，而是自动安装路由功能
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

定义组件

// main.js
// 可以自定义组件  const就是声明常量，类似var
const Vhome = { template: ‘<div>自定义主页面</div>‘ }
const Vusers = { template: ‘<div>自定义用户页面</div>‘ }

//main.js
// 也可以从其他组件导入进来
import Vhome from "./components/Vhome.vue"
import Vusers from "./components/Vusers.vue"

// components/Vhome.vue
template>
    <div class="home">
        <h1>导入home页</h1>
    </div>
</template>

<script>
    export default{
        name: "Vhome",
        data(){
            return {

            }
        }
    }
</script>

// components/Vusers.vue
<template>
    <div class="users">
        <h1>导入用户页</h1>
    </div>
</template>

<script>
    export default{
        name: "Vusers",
        data(){
            return {
                
            }
        }
    }
</script>

定义路由

每个路由应该映射一个组件。其中‘component’可以是通过Vue.extend()创建的组件构造器，或者只是一个组件配置对象。

// main.js
const routes = [  // const就是声明常量，类似var
  { path: ‘/home‘, component: Vhome },
  { path: ‘/users‘, component: Vusers }
]

创建router实例

// main.js
// 配置 routes
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

创建个挂载根实例

// main.js
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount(‘#app‘)

使用

<template>
  <div id="app">
    <p>
      <! -- 使用router-link组件做导航，通过to导入链接，<router-link>会生成一个a标签 -->
      <router-link to="/home">主页</router-link>
      <router-link to="/users">用户页</router-link>
    </p>
    <! -- <router-vies>是路由出口，路由匹配到的组件都会渲染到这里，比如Vhome.vue或者Vusers.vue的内容 -->
    <router-view></router-view>  
  </div>
</template>

<script>

export default {
  name: ‘App‘,
  data(){
    return {
    }
  }
}
</script>

结束！