0
点赞
收藏
分享

微信扫一扫

20 vue-嵌套router


20 vue-嵌套router_javascript

20 Vue-嵌套router

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>行找的皮卡丘</title>
</head>
<body>
<div id="app">

</div>
</body>
<script type="text/javascript" src="js/vue.min.js">// 下载vue-router 项目目录下:npm install vue-router
// 1、vue-router依赖于Vue 所以要引入Vue模块</script>
<script type="text/javascript" src=".\node_modules\vue-router\dist\vue-router.js">// 2、引入vue-router</script>

<script type="text/javascript">// 3、让Vue 使用VueRouter创建
// Vue.use(VueRouter);

// 首页组件
var Home={
template:`<div>
我是首页内容
<br/>
<router-link to='/home/song'>歌曲</router-link>
<router-link to='/home/movie'>电影</router-link>
<router-view></router-view>
</div>`
};

// 嵌套页组件
var Song={
template:`<div>歌曲列表页</div>`
};
var Movie={
template:`<div>电影列表页</div>`
};


// 4、创建router对象
var router = new VueRouter({
// 5、配置路由对象
routes: [
// 路由匹配的规则
{
path: '/home',
component: Home,
name: 'home',
// 嵌套路由中的子级路由
children:[
{
path: 'song',
component: Song,
},
{
path: 'movie',
component: Movie,
},
]
},
]
});

// 引入vue-router模块后 会抛出两个全局组件
// 1)router-link 相当于a标签,里面的to属性相当于href属性
// 2)router-view 路由匹配组件出口 (它渲染的组件是你使用 vue-router 指定的)
var App = {
template: `
<div>
<!--绑定to属性 通过路由名字匹配对应的组件-->
<router-link :to='{name:"home"}'>首页</router-link>
<router-view></router-view>
</div>

`,
}

new Vue({
el: '#app',
data() {
return {

}
},
components: {
App
},
// 6、交给Vue实例化对象管理
router: router,
template: `
<App/>

`,

});</script>
</html>

20 vue-嵌套router_js_02


20 vue-嵌套router_javascript_03


举报

相关推荐

0 条评论