VUE基础知识整理（三）路由使用

Vue.js 路由允许我们通过不同的 URL 访问不同的内容，控制页面端渲染不同的组件。

一、安装

路由做为vue的一个组件，在使用之前需要进行安装。

  cnpm install vue-router --save

二、引入

安装完成后，需要再需要使用的页面中引入路由或者在全局main.js中进行引入。

  import VueRouter from 'vue-router'
  Vue.use(VueRouter)

三、创建路由

通过以下语句创建路由

  const router = new VueRouter({
    routes:[
      {
        path:"/",
        name:"HelloWorld",
        component:HelloWorld
      }
    ]
  })

在需要显示的位置通过 router-view进行显示。

<router-view />

在vue创建项目的过程中的路由选项中如果选择需要路由，则会自动引入路由文件夹，在下面生成index.js，在该文件中会对路由进行引入。

import Vue from 'vue'
import Router from 'vue-router'
import Ucenter from '@/pages/ucenter'
import Search from '@/pages/search'
import Home from '@/pages/home'

Vue.use(Router)

export default new Router({
  routes: [
    {
        path:"/",
        name:"HelloWorld",
        component:HelloWorld
    },
    {
          path:"home",
          component:Home
    },
    {
          path:"ucenter",
          component:Ucenter
    },
    {
          path:"search",
          component:Search
    },
  ]
})

 在main.js中通过router注入到vue实例中。

import Vue from 'vue'
import App from './App'

import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

三、路由跳转

通过<router-link>进行路由的跳转。

<div class="index">
    <ul>
      <li>
        <router-link to="/home">
          主页
        </router-link>
      </li>
      <li>
        <router-link to="/ucenter" tag="div"> #增加tag属性用来说明生成的页面中的标签为div
        我的
        </router-link>
      </li>
      <li>
        <router-link to="/search">
        搜索
        </router-link>
      </li>
    </ul>
    <router-view />
  </div>

四、参数传递

//路由配置
routes: [
    {
      path:"/ucenter",
      name:"Ucenter",  //定义name，用来进行动态引用
      component:Ucenter
    }
]

//用:to进行动态绑定调用，跟params进行参数传递。
<router-link tag="button" :to="{name:'Ucenter',params:{uid:userId}>
</router-link>


//在ucenter页面中通过this.$route.params.uid进行参数的获取
{{ this.$route.params.uid }}

五、子路由

一个路由下面可以跟children进行路由嵌套。

routes: [
    {
      path:"/ucenter",
      name:"Ucenter",  //定义name，用来进行动态引用
      component:Ucenter
      children:[
        {
          path:"userdetail",
          component:UserDetail,
          redirect:"/userdetail",
        }
      ]
    }
]

六、路由相关导航方法

//想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL
  router.push
//跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
  router.replace
//这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
  router.go