<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<!-- vue路由跳转的原理,通过切换显示不同组件,来达到跳转页面的效果 所以我们叫他单页面-->
<!--路由跳转的组件-->
<!--路由跳转/入口的组件-->
<!--<router-link></router-link>-->
<!--路由出口的组件-->
<!--<router-view></router-view>-->
<router-link to="/">首页</router-link>
<router-link to="/details">详情行页</router-link>
<router-link to="/user">用户页</router-link>
<!--如果不设置路由出口 则无法显示内容-->
<main>
<router-view></router-view>
</main>
</div>
<script>
//第一步:定义路由跳转组件
var Home = {
template: `<div clas="home"><h1>这是首页</h1>
</div>`
}
var Details = {
template: `<div clas="details"><h1>这是详情页</h1></div>`
}
var User = {
template: `<div clas="user"><h1>这是用户页</h1></div>`
}
//第二步:定义路由跳转地址,组件根据什么地址跳转
var routes = [
{
// '/'表示根节点路径,页面最初显示的路径
path: '/', //路由跳转的地址
component: Home //当前路由跳转的组件
},
{
path: '/details',
component: Details
},
{
path: '/user',
component: User
}
]
//第三步:创建一个路由对象,将定义好的路由路径 挂载到路由实例上
var router = new VueRouter({
//将配置好的路由地址赋值给VueRouter的路由对象route
// routes: routes
routes //es6简写
})
new Vue({
el: "#app",
//第四步:将配置好的路由对象 挂在到vue实例上使用
//router:router,
router,
data: {}
})
</script>
</body>
</html>