您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
router命名路由
发布时间：2020-02-23 16:35:49编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
Vue.use(VueRouter);
var Login={
template:`<div>我是登录页</div>`
};
var Register={
template:`<div>我是注册页</div>`
};
//为每个路由条目设定下该条路由的名称
var router=new VueRouter({
routes:[
{
path:'/login',
name:'login',
component:Login
},
{
path:'/register',
name:'register',
component:Register
}
]
});
//to的参数由原来“冗长”的字符串变为“简洁”规整的对象,且to前用:修饰
var App = {
template:`<div class='app'>
<router-link :to ="{name:'login'}">登录</router-link>
<router-link :to ="{name:'register'}">注册</router-link>
<router-view></router-view>
</div>`,
};
//挂载路由对象
new Vue({
el: '#app',
router:router,
template: `<App />`,
components:{App}
});
</script>
</body>
</html>
关键字词：vue,route,:to
上一篇：用router插件做类似tab切换效果(router使用)
下一篇：路由参数