vue前端路由vue-router配置

责编:menVScode 2018-01-30 17:18 阅读(1214)

        一、vue-router使用步骤

        (1) 安装vue-router模块

npm install vue-router --save

        (2) 引入模块 

import VueRouter from 'vue-router'

        (3) 作为Vue的插件

Vue.use(VueRouter)

        (4) 创建路由实例对象

new VueRouter({
  ...配置参数
})

        (5) 注入Vue选项参数

new Vue({
  router
})

        (6) 告诉路由渲染的位置

<router-view></router-view>

        例子:main.js

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

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import CompA from '@/components/a'
import CompB from '@/components/b'

let router = new VueRouter({
  mode:'history', //默认是hash
  routes: [
    { path: '/a', name: 'CompA', component: CompA },
    { path: '/b', name: 'CompB', component: CompB }
  ]
})

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

        app.vue

<template>
  <div id="app">
    <router-link :to='{path:"/a"}'>a</router-link>
    <router-link :to='{path:"/b"}'>b</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return { }
  }
}
</script>

        二、vue-router路由参数

        (1)在路由配置中传递参数,如:

// ?:color参数可以有,也可以没有
{
  path: '/a/:color?',
  name: 'CompA',
  component: CompA
}
//页面路由形式:http://localhost:8080/a/red

       在CompA中用 this.$route.params 获取参数对象;

export default {
    data(){
        return {}
    },
    methods:{
        getParam(){
            console.log(this.$route.params) // {color: "red"}
        }
    }
}

        三、vue-router路由嵌套(子路由)

        父组件Fruit内部也要写上<router-view></router-view>,告诉子路由组件渲染的位置。

......
let router = new VueRouter({
  mode:'history',
  routes: [
    {
      path: '/fruit',
      name: 'Fruit',
      component: Fruit,
      children:[
        {
          path: 'apple', // apple前面不需要再写“/” http://localhost:8080/fruit/apple
          component: Apple
        }
        // http://localhost:8080/fruit
        // http://localhost:8080/fruit/apple
      ]
    },
    { path: '/ball', name: 'Ball', component: Ball }
  ]
})
......

        实现默认子路由:第一个子路由为空的时候,'/fruit' 路由默认渲染的就是 Apple 组件。

......
let router = new VueRouter({
  mode:'history',
  routes: [
    {
      path: '/fruit',
      component: Fruit,
      children:[
        {
          path: '', //写''空值,代表默认子路由,相对于“/fruit”
          name: 'Fruit',
          component: Apple
        },
        { path:'/banana, component:Banana }
      ]
    }
  ]
})
......

        四、vue-router 中的 router-link

        (1) 动态绑定

// index是变量,在 data 里面
<router-link :to='index'>home</router-link>

        (2) 对象形式,可以传参

<router-link :to='{path:"/fruit",param:{number:233,price:59}}'>fruit</router-link>

        (3) 具名路由(命名的路由)

<router-link :to='{name:"Fruit",param:{number:233,price:59}}'>fruit</router-link>

        (4) router-link默认是编译成a标签,需要编译成其他标签时,使用 tag 属性

// router-link编译成了div标签,并能进行跳转
<router-link :to="{name:"Fruit"}" tag="div">Fruit</router-link>

       编译结果:

<div class="">Fruit</div>

        (5) 需要点击整块内容(包含多个标签)跳转

<router-link :to="job" tag="li">
  <i></i>
  <span>job</span>
</router-link>
<li>
  <router-link to="/about">about</router-link>
</li>

        编译结果:

<li class="">
    <i></i>
    <span>job</span>
</li>
<li><a href="/about" class="router-link-exact-active router-link-active">about</a></li>

        以上属于声明式导航,使用了push()、go()等方法跳转的属于编程式导航。

        五、命名视图

        可以给 router-view 添加 name 属性,然后可以指定不同的视图渲染不同的组件。

        可查看此篇文章:vue命名视图(router-view)

        六、vue-router路由重定向

        可查看此篇文章:vue路由重定向(redirect)和别名(alias)

        七、vue-router中使用过渡制作路由跳转动画

<transition mode="out-in" name="fade">
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</transition>

        八、router-link-active

        切换到当前导航的时候,会给其添加一个焦点class类名router-link-active。我们也可以自定义设置类名,不使用 router-link-active 。

let router = new VueRouter({
  mode:'history',//默认是hash模式
  linkActiveClass:'menvscode-active',
  routes:[
    { path:'/home', component:Home },
    { path:'/about', component:About },
    { path:'/document', component:Document }
  ]
})

        如果选中激活链接,不想要使用 router-link-active 的样式,可以在其 router-link 标签上添加属性 active-class="自定义类名"。

<li>
    <router-link to="/about" active-class="activeClass">about</router-link>
</li>


标签: vue-router 路由 vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码