<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/vue.js"></script>
<!-- 1,安装 Vue-router 路由模块 -->
<script src="./js/vue-router.js"></script>
</head>
<body>
<div id="app">
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<!-- 这是 vue-router 提供的元素,专门用来
当作占位符的,将来,路由规则,匹配到的组件,就会展示到这个 router-view 中去 -->
<router-view></router-view>
</div>
</body>
<script>
//组件的模板对象
var login = {
template:'<h1>登录组件</h1>'
}
var register = {
template:'<h1>注册组件</h1>'
}
//2,创建一个路由对象,当导入 vue-router 包之后,在window 全局对象中,就有了一个 路由的构造函数,叫做VueRouter
//在 new 路由对象的时候,可以为 构造函数,传递一个配置对象
var routerObj = new VueRouter({
//route //这个吧、配置对象中的 route 表示 【路由匹配规则】 的意思
routes: [ //路由配置规则
//每个路由规则,都是一个对象,这个规则对象,身上,有两个必须的属性:
//属性1 是 path,表示监听 哪个路由链接地址;
//属性2 是 component,表示,如果 路由前面指定匹配到的 path,则展示 component 属性对应的那个组件
//注意:component 的属性值,必须是一个 组件的模块对象,不能是 组件的引用名称;
{path:'/login',component: login},
{path:'/register',component: register}
]
})
//创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el:'#app',
data:{},
methods: {
},
router:routerObj //将路由规则对象,注册到vm实例上,用来监听 URL 地址的变化,然后展示对应的组件
})
</script>
</html>
Vue-router基本使用(通俗易懂)
最新推荐文章于 2023-08-11 18:07:56 发布