其他分享
首页 > 其他分享> > vue-cli3路由vue-router用法

vue-cli3路由vue-router用法

作者:互联网

安装

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>

结束!

标签:Vusers,vue,cli3,Vue,router,main,路由
来源: https://www.cnblogs.com/aaronthon/p/12935423.html