标签：resigter 实例 component Vue let 路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>｜
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<template id="login">
<div> 登录页面 </div>
</template>
<template id="resigter">
<div> 注册页面 </div>
</template>
<script src="vue.js"></script>
<script src="vur-router.js"></script>
<script>
//1定义组件配置项
let Login = {
template: '#login'
}
let resigter = {
template: '#resigter'
}
//2定义路由列表配置项
let routes = [
{
path: '/login',
component: Login
},
{
path: '/register',
component: resigter
}
]
//3创建路由实例
let router = new VueRouter({
routes: routes
})
Vue.component('my-component', {
template: '<div>This is my component</div>'
})
//4创建Vue实例并挂载路由实例
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
//绑定路由实例
router: router
})
</script>
</body>
</html>
标签：resigter,
实例,
component,
Vue,
let,
路由
From： https://www.cnblogs.com/zy8899/p/18415214