<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<router-link to='/home'>我是主页</router-link>
<router-link to='/xinwen'>我是新闻</router-link>
<div><router-view></router-view></div>
</div>
<template id="ho">
<h2>我是主页的子路由</h2>
</template>
<template id="xin">
<h2>我是新闻的子路由</h2>
</template>
</body>
<script src="vue2.js"></script> //引用文件
<script src="vue-router.js"></script>
<script>
//组件
var Ho={
template:'#ho'
};
//组件
var Xin={
template:'#xin'
};
//配合路由路径
const routes=[
{path:'/home',component:Ho},
{path:'/xinwen',component:Xin},
{path:'*', redirect:'/home'}//重定向
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#app'
})
</script>
</html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<router-link to='/home'>我是主页</router-link>
<router-link to='/xinwen'>我是新闻</router-link>
<div><router-view></router-view></div>
</div>
<template id="ho">
<h2>我是主页的子路由</h2>
</template>
<template id="xin">
<h2>我是新闻的子路由</h2>
</template>
</body>
<script src="vue2.js"></script> //引用文件
<script src="vue-router.js"></script>
<script>
//组件
var Ho={
template:'#ho'
};
//组件
var Xin={
template:'#xin'
};
//配合路由路径
const routes=[
{path:'/home',component:Ho},
{path:'/xinwen',component:Xin},
{path:'*', redirect:'/home'}//重定向
];
//生成路由实例
const router=new VueRouter({
routes
});
//最后挂到vue上
new Vue({
router,
el:'#app'
})
</script>
</html>
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
