<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script type="text/javascript" src="../vue1026.js"></script>
<script ype="text/javascript" src="../vue-router1.0.min.js"></script>
<body>
<div id="app">
<a href="#" v-link="{path:'/account/login'}">login</a>
<a href="#" v-link="{path:'/account/regist'}">regist</a>
<router-view></router-view>
</div>
</body>
<script>
//开始路由编码的编写(注册组件)
var App = Vue.extend({});
var account = Vue.extend({
template: "<router-view></router-view>"
});
var login = Vue.extend({
template: "<h1>登陆界面</h1>"
});
var regist = Vue.extend({
template: "<h1>注册界面</h1>",
});
var router = new VueRouter;
//设定路由规则
//第一个login是path后面的参数，第二个login是组件的名字
router.map({
'account':{
component:account,
subRoutes:{
'login': {
component: login
},
'regist': {
component: regist
}
}
},
});
//开启路由
router.start(
App, '#app'
)
//设定默认路由跳转到login
route.redirect({
'/':'/account/login'
})
</script>
</html>
Vue1.0嵌套路由
猜你喜欢
转载自blog.csdn.net/baidu_39001881/article/details/81474565
今日推荐
周排行