vue router 使用html,17、Vue-router基本使用.html

// 下载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

原始数据

按行查看

历史