vue-router子路由

时间：2019-07-26 01:41:08 阅读：115 评论：0 收藏：0 [点我收藏+]

标签：nbsp abc mod lin 显示 ima route vuerouter 导入

红色字体为增改内容！！！

1、新建src/router.js

2、src/main.js　　

//导入vue和新建的router.js　　　

import Vue from ‘vue‘

import router from ‘./router.js‘

3、src/router.js

//导入vue和vue-router

import Vue from ‘vue‘

import VueRouter from ‘vue-router‘

//使用vue-router（名称为VueRouter，可以随便取）

Vue.use(VueRouter)

//定义组件模板内容

const first = {template:‘<div>这是first内容</div>‘}

const second = {template:‘<div>这是second内容</div>‘}

const Home = {template:‘<div>这是Home内容</div>‘}

const firstFirst = {template:‘<div>这是firstFirst内容</div>‘}

const firstSecond = {template:‘<div>这是firstSecond内容</div>‘}

const sld={

template:`

<router-view class="abc"></router-view>

</div>

}

//定义组件路径

const router = new VueRouter({

mode:"history",

base:__dirname,

routes:[ //routes

{path:"/",component:Home},

{path:"/first",component:sld,

children:[

{path:"/",component:first},

{path:"first",component:firstFirst},

{path:"second",component:firstSecond}

]

{path:"/second",component:second}

]

})

//使用组件

new Vue({

router,

template:`

<ul>

//router-link to=“指向的组件路径”

<li><router-link to="/first">first</router-link>

<ul>

<li><router-link to="/first/first">first</router-link></li>

<li><router-link to="/first/second">second</router-link></li>

</ul>

</li>

<li><router-link to="/second">second</router-link></li>

</ul>

<router-view class="abc"></router-view>

//router-view组件显示区域

</div>

}).$mount("#app") //组件挂载（index.html中定义的div的id为app）

4、运行npm run dev，页面显示效果为

vue-router子路由

标签：nbsp abc mod lin 显示 ima route vuerouter 导入

原文地址：https://www.cnblogs.com/yijisi/p/11247804.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行