版权声明:嘿嘿嘿 https://blog.csdn.net/luzhensmart/article/details/86260936
简化了用href前面加#的繁琐写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue.min.js"></script>
<script src="./lib/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!--因为是前端路由 所以得在地址前面加上#-->
<a href="#/toLogin">登录</a>
<a href="#/toRegister">注册</a>
<!--简化了用href前面加#的繁琐写法-->
<router-link to="/toLogin">登录</router-link>
<router-link to="/toRegister">注册</router-link>
</p>
<!-- 路由出口 -->
<!--vue-router提供的元素 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
<script>
// 实现某个组件显示 某个组件不显示,如网站首页 点击登录 展示登录的组件
//如果点击注册 则展示注册的组件
// 1. 定义 (路由) 组件。
var login = {
template: '<h1>登录组件</h1>'
}
//注意:这种只能在html页面 用标签的形式引用 login只是组件名称 而不是组件对象
//路由里面 是需要组件对象的 而不是组件名称 所以得用上面的那种写法
// Vue.component('login',{
// template: '<h1>登录</h1>'
// });
var register = {
template: '<h1>注册组件</h1>'
}
//创建一个路由对象 当当如vue-router.js之后,在window全局对象中,就会有一个
//路由的构造函数 叫做VueRouter
//在new VueRouter对象的时候 为构造函数传递一个配置对象
var routerObj = new VueRouter({
// route // 表示一个路由匹配规则
routes: [//表示很多的规则
//定义路由
//属性1:path 表示监听哪个路由的地址 toLogin
//属性2:表示组件,如果路由匹配到toLogin 那么则展示该组件login 注意 不能带'' 只能是上面定义的组件对象
//,如果路由匹配到toLogin 那么则展示该组件register
{path: '/toLogin',component: login},
{path: '/toRegister',component: register}
]
})
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习vue'
},
router: routerObj//把路由对象 注册到VUE实例对象上 用来监听URL地址变化 然后展示对应的组件
})
// 现在,应用已经启动了!
</script>
</body>
</html>