1、路由作用

用vue.js + vue-router创建单页面应用。页面不需要刷新就可以页面跳转,提供用户更好体验。

2、路由配置

new Router({
routes: [{
path: '/', //匹配路径
name: 'Hello', //路由的别名
component: Hello //需要加载的组件名
}, {
//使用变量名的形式传递参数。例如:/detail/10086
//在Detail组件中使用{{$router.params.id}}来接收
path: '/detail/:id',
name: 'Detail',
component: Detail
}
]
})

 3、路由跳转

<router-link :to="{name:'Detail',params:{id:10086}}">详情</router-link>

 4、实践:两组件之间跳转

代码实例

4.1、index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/component/Hello'
import Detail from '@/component/Detail' Vue.use(Router) export defaultnew Router({
router: [{
path: '/',
name: 'Hello',
component: Hello
}, {
path: '/detail/:id',
name: 'Detail',
component: Detail
}]
}) 4.2、Hello.vue:src->component->Hello.vue <template>
<div class = "hello" >
<h1>这是hello页面 </h1>
< router - link: to = {name: 'Detail',params: {id: 10086}}>详情</router-link>
</div>
</template> <script>
export default{
name: 'hello',
data() {
return {
msg: 'hello vue'
}
}
}
</script> < !--add "scoped" attribute limit css to this compent only-- >
<style scoped>
h1, h2 {
font - weight: normal;
} ul {
list - style - type: none;
padding: 0;
} li {
display: inline - block;
margin: 0 10px;
} a {
color: # 42b983
}
</style> 4.3、Detail.vue:src->component->Detail.vue < template >
< div >
< h1 > 这是detail页面 </h1>
{{$route.params.id}}
</div>
</template> <script>
export default{
name: 'hello',
data() {
return {}
}
}
</script> < !--add "scoped" attribute limit css to this compent only-- >
< style scoped >
</style> 4.4、启动项目
my_vue_app > npm run dev

5、vue组件由三部分组成

vue组件:template:html代码、 script:javascript代码、style:css代码

vue-router路由的使用的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  2. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  3. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  4. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  5. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  6. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  7. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  8. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. vue router路由(三)

    当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...

  10. vue router路由跳转了,但是页面没有变(已解决)

    小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)

随机推荐

  1. Customize Web Sessions List

    To customize Fiddler's Web Sessions List, add rules using FiddlerScript to the OnBeforeRequest funct ...

  2. 用OpenSSL把二进制的Cer证书转换程Base64格式的PEM格式的证书

    openssl x509 -inform der -in /d/ty.cer -pubkey -noout > /d/certificate_publickey.pem

  3. .NET Core 全新认识

    来源:yubinfeng cnblogs.com/yubinfeng/p/6626694.html 一.概述      .NET 经历14年,在Windows平台上的表现已经相当优秀,但是“跨平台.开 ...

  4. ibatis中#和$如何当作字符使用?

      1.情景展示 在plsql中,可以正常执行 但是在ibatis的sqlMap文件中,报错信息如下: 2.原因分析 ibatis中 #.$ 是功能符号,用来取值的,当sql中出现这类字符时便会造成冲 ...

  5. spring cloud 加入配置中心后的 部分 配置文件优先级

    经过一个小时的实验,得出部分配置优先级如下: bootstrap.properties:位于jar包外的优先级最高 application.properties:配置中心的文件 > 命令行配置 ...

  6. cnblogs反对按钮点击测试

    点击反对或推荐有惊喜~

  7. aligned_storage简单学习

    #include <iostream> #include <type_traits> #include <string> /* template< std:: ...

  8. log4delphi使用(转)

    转自:http://blog.csdn.net/brightgems/article/details/814042 Log4d是apache下的一个delphi开源子项目,它的设计思想来源于Log4j ...

  9. windbg(1)

    1.http://www.cnblogs.com/huangyong9527/category/384128.html 2.http://www.cnblogs.com/pugang/category ...

  10. ROS学习(十二)—— 编写简单的消息发布器和订阅器(C++)

    一.创建发布器节点 1 节点功能: 不断的在ROS网络中广播消息 2 创建节点 (1)打开工作空间目录 cd ~/catkin_ws/src/beginner_tutorials 创建一个发布器节点( ...