vue-cli3路由vue-router用法

vue

安装

npm install router" title="vue-router">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>

结束!

以上是 vue-cli3路由vue-router用法 的全部内容, 来源链接: utcz.com/z/377776.html

回到顶部