<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
<!--// vue-router提供的标签,专门用来当作占位符,将来路由规则匹配到的组件会展示到它中去-->
</div>
<script src="../vue-dev/vue-dev/dist/vue.min.js"></script>
<script src="vue-router.js"></script>
<script>
// 创建两个路由组件
var login = {
template:"<h3>登录页面</h3>"
}
var register = {
template:"<h3>注册页面</h3>"
}
// 创建一个路由对象;为构造函数传递一个配置对象,这个VueRouter,导入了Vue.router就会产生这个构造函数
var routerObj = new VueRouter({
// 路由配置规则都是一个对象,必须有两个属性;
routes:[
{path:"/login",component:login},
{path:"/register",component:register}
]
})
var vm = new Vue({
el:"#app",
data:{
},
methods:{
},
// 将路由规则对象注册到vue实例上用来监听URL地址变化,然后展示对应的组件
router:routerObj
})
</script>
</body>
</html>
路由的基本使用
最新推荐文章于 2022-11-03 22:40:49 发布