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

一丶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
个人分类: VUE学习
上一篇VUE学习笔记(三)-构造器里的选项
下一篇SpringMvc中的RestFul风格理解
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭