vue-router

路由

路由是单页应用的路径管理器，单页应用相当于只有一个index.html页面，改变路径可切换至不同的页面

安装vue-router

npm install --save vue-router

引用

//在入口文件中引用
import router from 'vue-router'
//vue提供的use方法
 Vue.use(router)

配置路由文件，并在vue实例中注入

import HelloEarth from '@/components/HelloWorld'
import HelloWorld from '@/components/HelloWorld'


var rt = new router({ 
    routes:[{ 
        path:'/',//指定要跳转的路径 
        component:HelloWorld//指定要跳转的组件
         }] 
   })
  new Vue({ 
      el: '#app', 
      router:rt, 
      components: { App },
      template: ''
    })

路由的跳转

export default new Router({
  routes: [  //  配置路由
    {
      path: '/helloworld',  // 第一个路由，路径为 /helloworld，跳转到 HelloWorld 组件
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/helloearth',  // 第二个路由，路径为 /helloearth，跳转到 HelloEarth 组件
      name: 'HelloEarth',
      component: HelloEarth
    }
  ]
})

文件中，设置了两个路由，当输入不同网址时，就会显示不同的组件内容。但是不可能让用户每次都在地址栏中输入地址来实现跳转，所以可以以链接的形式，当用户点击某一个链接时，实现跳转。

<router-link to="/"></router-link>

<template>
    <ul>
        <li>
            <router-link  to="/helloworld"> HELLO WORLD </router-link>
        </li>
        <li>
            <router-link to="/helloearth">HELLO EARTH</router-link>
        </li>
    </ul>
</template>

当用户点击 “Hello World”时，浏览器的地址栏就会走 /helloworld 路径，显示 HelloWorld 组件；当点击“Hello Earth”时，浏览器的地址栏就会走 /helloearth 路径，显示 HelloEarth 组件。

路由参数的传递

必须在路由内加入路由的name
必须在path后加/: +传递的参数
通过<router-link> 标签中的to传参

<router-link  
    :to="{name:'helloworld',params:{msg:你好 世界}}"> 
    HELLO WORLD
// 绑定一个对象，给指定组件传递参数，参数为对象形式
 </router-link>



 读取参数： $route.params.XXX
 方式：===/helloworld/你好世界
//给 HelloWorld 组件传递的参数，得 HelloWorld 来接收
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{$route.params.msg}}</h2>  // 读取参数使用 $route.params.xxx 形式
  </div>
</template>

router-link组件的props

<router-link 
    :to="{path: '/helloearth',query:{msg: 只有一个地球}}">
 </router-link>
 方式：===/helloworld?name=XX&count=xxx
 函数模式
 
  你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，
  将静态值与基于 路由的值结合等等。
  
  const router = new VueRouter({
      routes: [
      { path: '/search', component: SearchUser, props: (route) => ({
          query: route.query.q }) }
          ]
          })

栗子：

<router-link 
:to='/Home' replace tag="li" active-class="active" exact>
Home
</router-link>
这个栗子表示一个<li>标签，点击时跳转到Home组件中，并且不会留下历史跳转记录，
并且开启router-link严格模式

to：目标路由的链接，相当于a标签的href属性；必须；调用的是router.push()方法，将to的值传入router.push()里

<router-link 
:to='/Home'>Home</router-link>
渲染结果：
<a href="Home">Home</a>

<router-link
 :to="{ path: 'register', query: { name: 'xx' }}">router</router-link>
渲染结果：
<a href="/register?name=xx">router</a>

tag：指定<router-link>组件最终被渲染成什么标签；非必须；如果没有tag属性，router-link最终会被渲染成a标签。在上面的栗子中，渲染成了li标签。

<router-link 
:to='/Home' tag="li" >Home</router-link>
渲染结果：
<li>Home</li>
此时依旧会监听点击事件，触发导航

replace：调用router.replace()，页面切换时不会留下历史记录；非必须。
active-class：表示激活这个链接时，添加的class，默认是router-link-class
exact：表示开启router-link的严格模式

最后编辑于：2019.07.15 22:08:14