VUE学习笔记(四)-路由管理系统

标签: vue
20人阅读 评论(0) 收藏 举报
分类:
一丶Vue-router的核心文件的基本结构
router/index.js文件解读
import Vue from 'vue'  //引入Vue
import Router from 'vue-router'  //引入Vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'     

Vue.use(Router) //Vue全局使用的Router

export default new Router({
  routes: [                    //配置路由,这里是个数组
    {
      path'/',               //链接路径
      name'HelloWorld',     //路由名称
      component: HelloWorld    //对应的组件模板
    },{
      path:'/Hi',
      name:'Hi',
      component:Hi

    }
  ]
})

router-link 标签

作用:导航
<p>导航 :
  <router-link to="/">首页</router-link>
  <router-link to="/hi">Hi页面</router-link>
</p>
to的作用:导航路径


二丶子路由
例:
一丶将Hi.vue改成一个通用的模板,加入<router-view> 标签
二丶
将子路由在配置中加入children字段
{
  path:'/Hi',
  name:'Hi',
  component:Hi,
  children:[
    {path:'/', name:'Hi', component:Hi},
    {path:'H1', name:'H1', component:H1},
    {path:'H2', name:'H2', component:H2},
    {path:'H3', name:'H3', component:H3},
  ]

}
Vue-router传参:
方法一:
使用nam传参,<router-link></router-link>中的name和index.js中的name一致
输出:{{$router.name}}
方法二:
<router-link></router-link> :to绑定 
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的,然后后边跟的是一个对象形势的字符串.

  • name:就是我们在路由配置文件中起的name值。
  • params:就是我们要传的参数,它也是对象形势,在对象里可以传递多个值。
输出:{{$route.params.username}}


三丶单页面多路由操作

<router-view ></router-view>
<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'


Vue.use(Router)


export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }


  ]
})
Hi1.vue
<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>


<script>
export default {
  name: 'hi1',
  data () {
    return {
      msg: 'I am Hi1 page.'
    }
  }
}
</script>
Hi2.vue
<template>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</template>


<script>
export default {
  name: 'hi2',
  data () {
    return {
      msg: 'I am Hi2 page.'
    }
  }
}
</script>


五丶利用Url传参
在路由配置中利用 :冒号的形式传递参数
在绑定的参数可以加入正则,来判断
{
     path:'/params/:Id()/:Title'
}
取值:vue组件
<template>
  <div class="hello">
  <h1>{{ msg }}</h1>
  <p>newsId:{{ $route.params.newsId}}</p>  --利用路由取值
  </div>
</template>

<script>
  export default {
  data () {
  return {
  msg: 'params pages'
  }
  }
  }
</script>
传递参数:利用url路径

<router-link to="/Params/123/hello_params">Params</router-link>


六:重定向
在路由配置下,加入

{
  path:'/Hi1/:newsId/:newsTitle',
  redirect:'/Params/:newsId/:newsTitle'
}



Demo实例:Vue-demo实例


查看评论

三、Vue菜鸟小教程-嵌套路由、二级路由示例

     首先写这篇文章之前先声明一下,这篇文章是在空余时间写出来的,后期还会再往里面添加东西或者改动的,如果有哪里不对也欢迎指出。     在学习过程中我都是先阅读一遍官方文档,然后看例子学的,因为...
  • ginaxueyan
  • ginaxueyan
  • 2018-03-01 21:30:35
  • 149

vue动态路由匹配实例

vue动态路由匹配实例
  • qq_40963664
  • qq_40963664
  • 2017-11-21 10:15:37
  • 992

初入Vue 关于后台管理系统

最近一个人开发一套后台商品管理系统,前端使用Vue, 使用第三方UI界面AdminLTE。遇到一些问题梳理一下,第一个问题:从登录页跳转到后台首页,发现首页显示不完整,需要刷新一次才可以。解决办法是在...
  • Liu_qiangs
  • Liu_qiangs
  • 2018-01-22 14:59:00
  • 329

vue路由(带参传值)

vue搭建路由
  • it_liusi
  • it_liusi
  • 2017-07-24 21:49:34
  • 3206

VUE学习笔记

  • 2017年07月17日 00:50
  • 847KB
  • 下载

使用vue路由做出一个可以切换的demo

vue练习 vue基础 路由基础 vue路由 一、需要达到的效果原图效果:仿写效果:二、需要用到的知识 html css javascript vue 三:源代码级注释html部分:...
  • wangyongjie2017
  • wangyongjie2017
  • 2017-07-22 22:08:14
  • 1818

Linux邻居协议 学习笔记 之四 通用邻居项创建、查找、删除等相关的函数

上节主要是分析了通用邻居层邻居项的垃圾回收机制,这一节主要是分析邻居项的创建、查找、删除等相关的函数,这一节只是介绍函数功能,而没有涉及状态机、通用邻居层的架构等。比如邻居项删除函数neigh_des...
  • lickylin
  • lickylin
  • 2014-03-21 22:38:37
  • 2942

Vue2 后台管理系统解决方案

基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。 github地址:https://github.com/lin-xin/manage-system de...
  • lin_shuaixin
  • lin_shuaixin
  • 2017-03-08 10:56:30
  • 582

vue-router 动态添加 路由

动态添加路由可以用了做权限管理。登录后服务器端返回权限菜单,前端动态添加路由  然后在设置菜单  1、vue-router 有方法router.addRoutes(routes) 动态添加更多的路由...
  • u012499210
  • u012499210
  • 2017-11-21 20:57:50
  • 3655

Vue + ElementUI 手撸后台管理网站基本框架(三)登录及导航菜单加载

登录授权 登录及安全 为每个请求增加Token Token超时及刷新机制 创建系统菜单 模拟菜单数据 生成菜单 实现点击一级菜单收回所有其他子菜单 NEXT——主题切换 源码 本系列目录 ...
  • harsima
  • harsima
  • 2017-09-12 20:47:09
  • 14446
    个人资料
    等级:
    访问量: 241
    积分: 121
    排名: 119万+
    文章存档