vue-router的官方页面:https://router.vuejs.org/zh/installation.html
一:安装vue-router
直接去https://unpkg.com/vue-router/dist/vue-router.js网站进行下载vue-router.js文件
然后将vue-router.js引入到项目中就可以了。(注意,vue-router.js是依赖vue.js的)
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
案例
原理描述:首先我们在点击登陆,或者注册按钮的时候,会切换到<a>标签所指向的地址,即:地址改变
然后我们定义的路由就会捕捉到这个地址,然后将这个地址要展示的组件显示到页面上。
<html>
<head>
<script src="~/Scripts/vue.js"></script>
<script src="~/Scripts/vue-router.js"></script>
</head>
<body>
<div id="app">
<!--Vue中的路由是基于hash的(即:锚点)所以<a>标签在做页面跳转的时候href地址不能以/线开始(即:不能直接写成<a href="/login">否则就跳转到一个真实的页面了,正确的做法是在/线 前加上一个#-->
<a href="#/login">登陆</a> <a href="#/register">注册</a>
<hr />
<!--我们每次写a标签的时候,href的值都要在前面加一个#符号,特别烦,于是vue-router.js给了我们一个<roter-link>标签-->
<!--router-link是一个路由的连接,它默认渲染成一个a标签,当然我们也可以通过tag属性将它渲染成一个其他的标签,其实不管你渲染成什么标签,vue-router.js都会给他绑定一个点击跳转的触发事件-->
<router-link to="/login">登陆</router-link>
<router-link to="/register" tag="sapn">注册</router-link> <!--tag="sapn"表示将这个链接渲染成一个span标签,但是它同样可以点击跳转-->
<!--这是vue-router提供的元素,专门用来当做占位符的,将来再根据路由规则匹配到的组件就会展示到这个router-view中去-->
<router-view></router-view>
</div>
<template id="login">
<div>
<h3>这是登陆窗口</h3>
</div>
</template>
<template id="register">
<div>
<h3>这里是注册窗口</h3>
</div>
</template>
<script>
var login = { template: "#login" } //定义个组件模板对象login
var register = { template: "#register" } //定义个组件模板对象register
//1:创建一个路由对象(当导入vue-router.js包后,在window的全局对象中,就有了一个路由构造函数,名字叫VueRouter)
//2:在new VueRouter对象的时候,可以为构造函数传递一个配置对象
var routerObj = new VueRouter({
//route //这个配置对象中的route表示[路由匹配规则]的意思
routes: [
//每个路由规则都是一个对象,这个规则对象身上有两个必须的属性
//属性1:path,表示监听那个路由链接地址;
//属性2:component,表示如果路由是前面匹配到的path则展示component属性对应的哪个组件
{ path: "/", redirect: "/login" }, //将根地址重定向到login模块;例如根地址是:http://localhost:64317/Home/Index,当我们打开这个地址的时候,就会被这条路由捕捉到,然后就会自动重定向到http://localhost:64317/Home/Index#/login这个模块
{ path: "/login", component: login },
{ path: "/register", component: register }
]
});
var vm = new Vue({
el: "#app",
data: {
},
methods: {
},
components: {
//这里是定义私有组件的地方
},
router: routerObj //将路由规则对象,注册到我们的vm实例上,用来监听URL 地址的变化,然后展示对应的组件
});
</script>
</body>
</html>