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. ssh 防止超时掉线

    超时掉线的机制原始驱动力是什么?反正远程操作久置掉线确实挺烦的. 解决的办法呢,也是有的,客户端和服务器端都可以做.就是使用 no-op 反空闲协议发送呼吸包,来确认另一端是否在线:没回应就下线,而不 ...

  2. 《Unix&Linux大学教程》学习笔记一:历史与常识

     “为什么说Unix/Linux是自由的:         因为我们可以自己组装一个操作系统:Unix/Linux内核+其他实用工具+编程工具+GUI         因为我们可以自由地获取开源工作者 ...

  3. 一起talk C栗子吧(第八十五回:C语言实例--使用信号进行进程间通信二)

    各位看官们,大家好,上一回中咱们说的是使用信号进行进程间通信的样例,这一回咱们接着上一回的内容,继续说该样例.闲话休提.言归正转. 让我们一起talk C栗子吧. 我们在上一回中举了使用信号进行进程间 ...

  4. PRM路径规划算法

    路径规划作为机器人完成各种任务的基础,一直是研究的热点.研究人员提出了许多规划方法:如人工势场法.单元分解法.随机路标图(PRM)法.快速搜索树(RRT)法等.传统的人工势场.单元分解法需要对空间中的 ...

  5. Windows下 VS2015编译levelDB(nmake)

    VS2015编译levelDB Leveldb是一个google实现的非常高效的kv数据库,非常适合嵌入到程序中.如果有简单的key-value数据库需求,而又想使用一个数据库服务的话,levelDB ...

  6. 纪念品分组(NOIP2007)

    纪念品分组(NOIP2007)[题目描述] 元旦快到了,校学生会让乐乐负责新年晚会的纪念品发放工作. 为使得参加晚会的同学所获得的纪念品价值相对均衡,他要把 购来的纪念品根据价格进行分组,但每组最多只 ...

  7. 阿里员工都是这样排查Java问题的,附工具单(转)

    平时的工作中经常碰到很多疑难问题的处理,在解决问题的同时,有一些工具起到了相当大的作用,在此书写下来,一是作为笔记,可以让自己后续忘记了可快速翻阅,二是分享,希望看到此文的同学们可以拿出自己日常觉得帮 ...

  8. Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境

    Easyui入门视频教程 第02集--- ASP.NET MVC下 搭建 EasyUI环境 目录 ----------------------- Easyui入门视频教程 第09集---登录完善 图标 ...

  9. ios中布局(推荐一)

    - (void)viewDidLoad { [super viewDidLoad]; NSArray *data=@[@"标题一",@"标题二",@" ...

  10. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...