// 下载vue-router 项目目录下:npm install vue-router
// 1、vue-router依赖于Vue 所以要引入Vue模块
// 2、引入vue-router
// 3、让Vue 使用VueRouter创建
// Vue.use(VueRouter);
// 登陆组件
var Login={
template:`
我是登陆页面
`,
};
// 注册组件
var Register={
template:`
我是注册页面
`,
};
// 4、创建router对象
var router = new VueRouter({
// 5、配置路由对象
routes:[
// 路由匹配的规则
{
path:'/login',
component:Login,
},
{
path:'/Register',
component:Register,
},
]
});
// 引入vue-router模块后 会抛出两个全局组件
// 1)router-link 相当于a标签,里面的to属性相当于href属性
// 2)router-view 路由匹配组件出口 (它渲染的组件是你使用 vue-router 指定的)
var App={
template:`
登陆页面
注册页面
`,
}
new Vue({
el: '#app',
data() {
return {
}
},
components:{
App
},
// 6、交给Vue实例化对象管理
router:router,
template:`
`,
});
一键复制
编辑
Web IDE
原始数据
按行查看
历史