路由知识二

标签：hello   child   template   script   技术分享   观察   direct   友好   xxx   

vue-router是一个插件包，所以我们还是需要用npm/cnpm来进行安装的：npm/cnpm install vue-router --save-dev。

在路由的核心文件：src/router/index.js分析：

import Vue from ‘vue‘   //引入Vue
import Router from ‘vue-router‘  //引入vue-router
import Hello from ‘@/components/Hello‘  //引入根目录下的Hello.vue组件
 
Vue.use(Router)  //Vue全局使用Router
 
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: ‘/‘,         //链接路径
      name: ‘Hello‘,     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

router-link制作导航：
导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签，我们先来看一下它的语法。

<router-link to="/">[显示字段]</router-link>

to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，
[显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页 产品页等等。

子路由的写法是在原有的路由配置下加入children字段。

children:[
　　{path:‘/‘,component:xxx},
　　{path:‘xx‘,component:xxx},
]

children字段后边跟的是个数组，数组里和其他配置路由基本相同，需要配置path和component。（在配置路由文件前，需要先用import引入相应组件）

路由传参方式一：在路由文件src/router/index.js里配置name属性。

routes: [
　　{
　　　　path: ‘/‘,
　　　　name: ‘Hello‘,
　　　　component: Hello
　　}
]
模板里(src/App.vue)用$router.name的形势接收，比如直接在模板中显示：

<p>{{ $route.name}}</p>

路由传参方式二：通过<router-link> 标签中的to传参。

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

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

name：就是我们在路由配置文件中起的name值。
params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

单页面多路由区域操作：在一个页面里我们有2个以上<router-view>区域，我们通过配置路由的js文件，来操作这些区域的内容。

vue-router 利用url传递参数：

 :冒号的形式传递参数
我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。
在配置文件里以冒号的形式设置参数。我们在src/router/index.js文件里配置路由。
{
    path:‘/params/:newsId/:newsTitle‘,
     component:Params
} 

    
<router-link to="/params/1222444/nihao">params</router-link> |

<template>
    <div>
        <h2>{{ msg }}</h2>
        <p>新闻ID：{{ $route.params.newsId}}</p>
        <p>新闻标题：{{ $route.params.newsTitle}}</p>
    </div>
</template>
 
<script>
export default {
  name: ‘params‘,
  data () {
    return {
      msg: ‘hellow vue-router‘
    }
  }
}
</script>

path:‘/params/:newsId(\\d+)/:newsTitle‘,

{
  path:‘/params/:newsId(\\d+)/:newsTitle‘,
  component:Params
},{
  path:‘/goParams/:newsId(\\d+)/:newsTitle‘,
  redirect:‘/params/:newsId(\\d+)/:newsTitle‘
}

路由知识二

标签：hello   child   template   script   技术分享   观察   direct   友好   xxx   

原文地址：http://www.cnblogs.com/lhl66/p/7496646.html