vue-cli3路由vue-router用法
安装
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就是声明常量,类似varconst 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.vuetemplate>
<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