原文地址：Vue路由vue-router

7.路由vue-router

7.1.场景模拟

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：

7.1.1.编写父组件

为了让接下来的功能比较清晰，我们先新建一个文件夹：src

然后新建一个HTML文件，作为入口：index.html

然后编写页面的基本结构：

<div id="app"><span>登录</span><span>注册</span><hr/><div>登录页/注册页</div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">var vm = new Vue({el:"#app"})
</script>

样式：

7.1.2.编写登录及注册组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们新建一个user目录以及login.js及register.js：

编写组件，这里我们只写模板，不写功能。

const loginForm = {template:'\<div>\<h2>登录页</h2> \用户名：<input type="text"><br/>\密码：<input type="password"><br/>\</div>\'
}

const registerForm = {template:'\<div>\<h2>注册页</h2> \用&ensp;户&ensp;名：<input type="text"><br/>\密&emsp;&emsp;码：<input type="password"><br/>\确认密码：<input type="password"><br/>\</div>\'
}

7.1.3.在父组件中引用

<div id="app"><span>登录</span><span>注册</span><hr/><div><!--<loginForm></loginForm>--><!--疑问：为什么不采用上面的写法？由于html是大小写不敏感的，如果采用上面的写法，则被认为是<loginform></loginform>所以，如果是驼峰形式的组件，需要把驼峰转化为“-”的形式--><login-form></login-form><register-form></register-form></div>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="user/login.js"></script>
<script src="user/register.js"></script>
<script type="text/javascript">var vm = new Vue({el: "#app",components: {loginForm,registerForm}})
</script>

效果：

7.1.5.问题

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

7.2.vue-router简介和安装

使用vue-router和vue可以非常方便的实现复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装：npm install vue-router --save

在index.html中引入依赖：

<script src="../node_modules/vue-router/dist/vue-router.js"></script>

7.3.快速入门

新建vue-router对象，并且指定路由规则：

// 创建VueRouter对象
const router = new VueRouter({routes:[ // 编写路由规则{path:"/login", // 请求路径component:loginForm // 组件名称},{path:"/register",component:registerForm},]
})

创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称

在父组件中引入router对象：

var vm = new Vue({el:"#app",components:{// 引用登录和注册组件loginForm,registerForm},router // 引用上面定义的router对象
})

页面跳转控制：

<div id="app"><!--router-link来指定跳转的路径--><span><router-link to="/login">登录</router-link></span><span><router-link to="/register">注册</router-link></span><hr/><div><!--vue-router的锚点--><router-view></router-view></div>
</div>

通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

效果：

注意：单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

事实上，我们总共就一个HTML：index.html

Vue—基础概念—路由（vue-router）相关推荐

前端vue基础学习之vue项目文件结构
vue项目文件结构查看上一篇前端基础学习之vue的生命周期 build文件用于打包创建dist目录 webpack.base.conf.js alias配置别名 config index.js ho ...
Vue基础入门(2) Vue.js下载与安装
下载与安装Vue.js Vue.js的官网: https://cn.vuejs.org/ 如果在项目中使用Vue.js框架,有两种方式:一是在页面中使用Script的方式直接引入,可以在官网下载Vue ...
Vue基础Day_01学习+Vue项目创建报错(true` in `“vueCompilerOptions“` property)解决方案
Vue_Study01 1.Vue是什么? 1.1-Vue怎么学 Vue是在工程化的环境下进行学习的 1.2-Vue开发方式 1.3-Vue脚手架项目创建目录 1.x-创建工程文件报错解决方案注意 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页（一）...
缘起书说前两篇文章< 十五 ║ Vue前篇:JS对象&字面量&this>和 < 十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面 ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
Vue—基础概念—组建化
6.组件化在大型应用开发的时候,页面可以划分成很多部分.往往不同的页面,也会有相同的部分.例如可能会有相同的头部导航. 但是如果每个页面都独自开发,这无疑增加了我们开发的成本.所以我们会把页面的不同 ...
Vue—基础概念—指令
原文地址:Vue指令 5.指令什么是指令? 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的预期值是:单个 JavaScript 表达式.指令的职责是,当表达式的值改变时,将 ...
Vue—基础概念—实例
原文地址:Vue实例 1.创建Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项 }) 在构造函数中传入一个对象, ...
vue 获取当前路由地址——router.currentRoute与$route
1.router.currentRoute 相当于 $route,但是$route.path或者$route.fullPath只能在组件中用组件里头:`/user?a=10` $route.path ...

Vue—基础概念—路由（vue-router）