一、vue中路由的使用

1、定义组件

  1. <template>
  2. <div class="hello">
  3. <h1 @click="info" :class="color">{{ msg }}</h1>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'hello',
  9. data () {
  10. return {
  11. msg: '我是Hello组件',
  12. color:'color'
  13. }
  14. },
  15. methods:{
  16. info(){
  17. console.log('你点击了我');
  18. }
  19. }
  20. }
  21. </script>
  22. <style>
  23. .color{
  24. color:#630;
  25. }
  26. </style>

2、配置路由文件

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import Hello from '@/components/Hello'
  4. import Word from '@/components/Word';
  5. Vue.use(Router)
  6. export default new Router({
  7. routes: [
  8. {
  9. path: '/',
  10. component: Hello
  11. },
  12. {
  13. path:'/index',
  14. component:Word
  15. }
  16. ]
  17. })

3、配置路由插座<router-view></router-view>

  1. <template>
  2. <div id="app">
  3. <!--可以定义不变的内容-->
  4. <h3>{{title}}</h3>
  5. <!--定义路由插座-->
  6. <router-view></router-view>
  7. <!--可以定义不变的内容-->
  8. </div>
  9. </template>
  10. <script>
  11. export default{
  12. name:'app',
  13. data(){
  14. return{
  15. title:'我是项目主入口'
  16. }
  17. }
  18. }
  19. </script>

4、路由文件注入到main.js文件中

  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3. import App from './App';
  4. import router from './router/index';
  5. Vue.config.productionTip = false;
  6. /* eslint-disable no-new */
  7. new Vue({
  8. el: '#app',
  9. router,
  10. render(h){
  11. return h(App);
  12. }
  13. })

二、配置路由的跳转

路由的跳转使用标签router-link
1、知道路径的跳转

  1. <ul>
  2. <li><router-link to="/">Hello页面</router-link></li>
  3. <li><router-link to="/word">word页面</router-link></li>
  4. </ul>
  5. <!-- 定义路由插座 -->
  6. <router-view></router-view>

2、to是通过绑定数据到上面

  1. <ul>
  2. <li><router-link to="/">Hello页面</router-link></li>
  3. <li><router-link :to="word">word页面</router-link></li>
  4. </ul>
  5. <!-- 定义路由插座 -->
  6. <router-view></router-view>
  7. <script>
  8. export default{
  9. name:'app',
  10. data(){
  11. return{
  12. title:'我是项目主入口',
  13. word:'/word'
  14. }
  15. }
  16. }
  17. </script>

三、定义子路由

1、定义路由跳转

  1. <ul>
  2. <li><router-link to="/word/router1">路由1</router-link></li>
  3. <li><router-link to="/word/router2">路由2</router-link></li>
  4. <router-view></router-view>
  5. </ul>

2、路由的跳转

  1. {
  2. path:'/word',
  3. component:Word,
  4. children:[
  5. {
  6. path:'router1',
  7. component:Router1
  8. },
  9. {
  10. path:'router2',
  11. component:Router2
  12. }
  13. ]
  14. }

四、路由之间传递参数params方式

1、路由跳转的时候定义要传递参数形式

  1. {
  2. path:'router1/:id',
  3. component:Router1
  4. },

2、页面跳转的时候传递参数

  1. <!--123就是传递的id值-->
  2. <li><router-link to="/word/router1/123">路由1</router-link></li>

3、在组件中接收传递过去的参数

  1. export default{
  2. mounted(){
  3. console.log(this.$route);
  4. console.log(this.$route.params.id);
  5. }
  6. }

五、路由之间传递参数query方式

1、在路由跳转地方传递query参数

  1. <li><router-link v-bind:to="{path:'/word/router2',query:{id:123}}">路由2</router-link></li>

2、在组件的mounted中接收

  1. export default{
  2. mounted(){
  3. console.log(this.$route);
  4. console.log(this.$route.query.id);
  5. }
  6. }

六、关于vue脚本中操作页面的跳转及传递参数

1、使用push实现页面跳转

  1. methods:{
  2. go1(){
  3. // 使用params传递参数
  4. this.$router.push({path:'/word/router1/123'});
  5. }
  6. }

2、使用replace实现页面的跳转

  1. methods:{
  2. go2(){
  3. // 使用query传递参数
  4. this.$router.replace({path:'/word/router2',query:{id:123}});
  5. }
  6. }

七、关于前进与后退


1、页面代码

  1. <input type="button" value="前进" @click="next"/>
  2. <input type="button" value="后进" @click="prevent"/>

2、事件方法代码

  1. methods:{
  2. next(){
  3. this.$router.go(1);
  4. },
  5. prevent(){
  6. this.$router.go(-1);
  7. }
  8. }

八、重定向

1、配置路由

  1. {
  2. path:'router', // path路径
  3. redirect:'/word/router3' // 重定向指向的路径
  4. }

2、配置页面跳转

  1. <li><router-link to="/word/router">路由4</router-link></li>

3、重定向函数

  1. {
  2. path:'router5',
  3. redirect:()=>{
  4. console.log(arguments);
  5. return '/word/router3';
  6. }
  7. }

九、路由的钩子函数

1、beforeEnter的使用

  1. {
  2. path:'router2',
  3. component:Router2,
  4. beforeEnter(to,form,next){
  5. console.log('///',arguments);
  6. setTimeout(()=>(next()),1000);
  7. }
  8. },

2、beforeRouteUpdate的使用

3、beforeRouteLeave的使用


十、路由实现组件间传递数据

1、直接传递到组件

<Myhead v-bind:name1="name1"></Myhead>
1

  1. <script>
  2. import Myheadfrom '@/components/Myhead';
  3. export default{
  4. name:'app',
  5. data(){
  6. return{
  7. name1:'张三'
  8. }
  9. },
  10. components:{
  11. Myhead
  12. }
  13. }
  14. </script>

2、组件Myhead中接收

  1. export default{
  2. props:['name1'],
  3. }

3、传递到router-view上

  1. <router-view v-bind:age="age"></router-view>
  2. export default{
  3. name:'word',
  4. props:['age'],
  5. }

 

http://www.beimohome.cn

Vue路由注意事项的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. Vue路由参数

    vue路由参数 1.参数router-link vue.prototype.xxx = {add:fn}`所有组件中,使用this.xxx就能拿到这个对象2.查询字符串 (1)配置: :to=&quo ...

  3. vue项目注意事项

    vue项目注意事项 1. 文件和路由命名规范 views里面代表的是你下面导航中的每一块,每个文件名 需要大写,路由命名全部小写,第一层路由就是最下面的那几个导航的名字,二级路由是在一 级路由的基础上 ...

  4. Vue路由-详细总结

    Vue路由vue-router   前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL ...

  5. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  6. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  7. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  8. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  9. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

随机推荐

  1. Explain 参数详解,重点部分已经全部完成,还有少数几个参数没不理解没标注。

    Explain 参数详解,重点部分已经全部完成,还有少数几个参数没不理解没标注.http://naotu.baidu.com/file/cdb631355392e317e1d925dc2e48f592 ...

  2. Qt带参数的信号和槽

    在Qt的开发过程中,信号带参数是很常见的,在使用带参数的信号槽时,有以下几点需要注意. 当信号和槽函数的参数数量相同时,它们的参数类型要完全一致. 信号和槽函数的声明: signals: void i ...

  3. C#基础知识之扩展方法

    扩展方法需要满足的条件: 1.扩展方法必须定义在静态类里. 2.扩展方法必须是静态方法. 3.扩展方法的第一个参数以this修饰符为前缀. 4.扩展方法必须在使用它的类的扩展方法内,否则必须显示的us ...

  4. Delphi--长线程

    { 长线程, 开启:随应用程序启用而启动 关闭:岁应用程序关闭而结束 } unit uLongThread; interface uses Classes, ADODB, DB, ActiveX, S ...

  5. 运算符、流程控制(if、while)笔记

    目录 算术运算符 比较运算符(返回一个bool值) 逻辑运算符(把多个条件同时叠加) 赋值运算符 身份运算符 位运算符 成员运算符 python运算优先级 流程控制:向一个方向变化 if判断 单分支结 ...

  6. unittest----常用属性详解(框架属性详解)

    很久没有写关于测试的随笔了,最近有空学习.整理一下关于unittest框架的知识. unittest单元测试框架,不仅可以适用于单元测试,还可以适用WEB自动化测试用例的开发与执行. unittest ...

  7. 解决使用脚手架构建项目缺失node_modules文件夹文件问题

    昨晚,在教我前端交流群里面的朋友搭建vue开发环境和构建vue项目的时候发现我自己之前能正常构建vue项目的现在却不行了,排查之下发现 通过脚手架构建项目的时候项目缺失了node_modules文件夹 ...

  8. linux运维、架构之路-cobbler无人值守

    一.cobbler介绍 Cobbler是一个Linux服务器安装的服务,可以通过网络启动(PXE)的方式来快速安装.重装物理服务器和虚拟机,同时还可以管理DHCP,DNS等 1.主要功能:①Cobbl ...

  9. CSS插入的四种方式

    一.什么是CSS CSS(Cascading style sheets  层叠样式表),CSS可以用以为网页构建样式表,通过样式表来达到对网页进行美化的效果.所谓层叠可以将网页想象成一层层的结构,高层 ...

  10. USACO Overplanting ( 线段树扫描线 )

    题意 : 在二维平面上给出 N 个矩形,问你所有矩形构成的图案的面积是多少(相互覆盖的地方只计算一次) 分析 :  求矩形面积并可以模拟来做,不过使用线段树来辅助做扫描线可以更高效地求解 扫描线顾名思 ...