使用Vue-Router路由
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:
- 嵌套的路由/视图表
- 模块化的、基于组件的路由配置
- 路由参数、查询、通配符
- 基于 Vue.js 过渡系统的视图过渡效果
- 细粒度的导航控制
- 带有自动激活的 CSS class 的链接
- HTML5 历史模式或 hash 模式,在 IE9 中自动降级
- 自定义的滚动条行为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
<!--1、引入vue-router(核心插件)-->
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
let Login = {
template:`<div>
<h1>我是登录界面</h1>
</div>`
}
let Register = {
template: `<div>
<h1>我是注册界面</h1>
</div>`
}
//2、安装插件 =>?
Vue.use(VueRouter);
//3、创建路由对象
let router = new VueRouter({
//4、配置路由对象
routes:[{
path:"/login",
component:Login
},{
path:"/register",
component:Register
}]
})
//5、将配置好的路由对象关联到vue实例中
let App = {
template:`
<div>
<!--vue内置组件-->
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>`
}
new Vue({
el:"#app",
template:`<app/>`,
components:{
app:App
},
router:router
})
</script>
</body>
</html>
执行效果
具体使用请参考
官网文档
使用Vue-Router路由的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue router路由(三)
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
- vue router路由跳转了,但是页面没有变(已解决)
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
随机推荐
- Java 开始
(事先声明:该文章并非完全是我自己的产出,更多的是我个人在看到资料后通过理解并记录下来,作为自己阅读后的一个笔记:我现在试图对自己多年工作中的知识点做一个回顾,希望能融会贯通) (此文参考<Ja ...
- nginx1.14.0版本https加密配置
修改host文件,为最后访问域名准备 C:\Windows\System32\drivers\etc host文件目录192.168.10.140 www.joyce.com 在最后添加这个自定义域名 ...
- lambda expressions
语法lambda表达式包含下面几个要素:1.逗号分隔的参数列表,如CheckPerson.test(Person p),其中p表示一个Person的对象实例 2.向右箭头 →, 箭头左侧是表达式入参, ...
- 微信小程序+没有找到node_modules目录
第一步:设置-->项目设置-->使用npm模块 第二步:右键目录下miniprogram-->终端打开-->输入npm init-->在packagename下输入:sm ...
- Creating and using a blendspace in c++
转自:https://forums.unrealengine.com/development-discussion/c-gameplay-programming/104831-creating-and ...
- docker 搭建 hustoj
docker 搭建 hustoj hustoj 是个GPL开源的OJ,其提供了docker形式的安装方式. 为执行方便,选择使用aliyun提供的docker镜像来加速安装. 拉取镜像 docker ...
- Java经典代码片段——使用NIO进行快速的文件拷贝
public static void fileCopy(File in, File out) throws IOException { FileChannel inChannel = new File ...
- (转)K-近邻算法(KNN)
K-近邻算法(KNN)概述 KNN是通过测量不同特征值之间的距离进行分类.它的思路是:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别 ...
- Oracle层级询语句connect by 用法详解
如果表中包含层级数据,那么你就可以使用层级查询从句选择行层级顺序. 1.层级查询从句语法 层级查询从句语法: { CONNECT BY [ NOCYCLE ] condition [AND condi ...
- Ajax 请求请求 MVC WebAPI跨域问题;XMLHttpRequest cannot load
问题:XMLHttpRequest cannot load http://192.168.1.4:9010//api/contacts. The 'Access-Control-Allow-Origi ...