vue-rouer 路由

安装/配置:

//进入项目目录:(在搭建项目的时候安装了)
cnpm install vue-router --save
1
2

旧版路由

需要自己配置
//项目中载入,一般在main.js中载入:
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    let router = new VueRouter({})    //其中配置路径和地址
 
//在Vue中引入:
    new Vue({
      el: '#app',
      router,
      template: '',
      components: { APP }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13

新版路由:

自动配置好了,直接在router/index.js中设置即可

设置页面路由

一个vue页面

<template>
    <div class="apple">213124div>
template>
<script>
export default {
  name: 'Apple'
}
script>
<style scoped>
style>
1
2
3
4
5
6
7
8
9
10

旧版

在new VueRouter({})所在页面引入:
import Apple from '@/components/Apple'
 
routes: [
       mode:'history',
    {
        path:'/apple',
        component:Apple
    },
     {
        path:'/apple2',
        component:Apple2
    }
  ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

新版

方法1:
const all = r => require.ensure([], () => r(require('../components/attendance/a_all')));
方法2:
const Login =  (resolve) => {require(['@/components/Login/login'],resolve)};
 
 
{
    path: '/hdwrj',
    name: 'hdwrj',
    component: hdwrj
  }
1
2
3
4
5
6
7
8
9
10
11

在APP.vue中引入

(会在这里显示)

<router-view>router-view>
1

路由定义

路由命名

    {
        path:'/apple',
        component:Apple,
        name:'applePage'
 
    }
访问:
    <router-link :to="{name:'applePage'}">to apple</router-link>
1
2
3
4
5
6
7
8

命名路由视图

在router-view 上添加name

<router-view name='viewA  '>router-view>
1

路由表中可以根据name定义页面

    {
        path:'/apple',
        component:{
            viewA:Apple,
            viewB:OtherApple,
        },
        name:'applePage'
    }
1
2
3
4
5
6
7
8

路由嵌套(子路由)

    {
        path:'/apple',
        component:Apple,
        childdren:[
            {
                path:'/childapple/',
                component:ChildApple
            }
        ]
    },
1
2
3
4
5
6
7
8
9
10

内容要在Apple.vue中添加

<router-view>router-view>
1

页面跳转:

路由跳转

页面内跳转router-link

要在 mode:'history', 之下

<router-link :to="{path:'apple'},query: {id:id}">to applerouter-link>
     <router-link :to="{path:'apple2'}">to apple2router-link>
 
 
普通页面跳转
    <router-link :to="{path:'apple'}">to applerouter-link>
基于当前路径跳转
    <router-link :to="'apple'">to applerouter-link>
根目录:
    <router-link :to="'/apple'">to applerouter-link>
动态设置:
    <router-link :to="apple">to applerouter-link>
    在data中:
      data(){
          reurn{
              apple:'apple'
          }
      }
传递参数:
    <router-link :to="{path:'apple',param:{color:'red'}}">to applerouter-link>
    可以访问 apple/red(参数)
改变router-link显示样式:
    <router-link :to="'apple'" tag="li">to applerouter-link>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在链接中设置参数

可以设置多层/apple/:color/:font/....

路由设置:path:'/apple/:color',
页面跳转:http://localhost:8080/apple/red
获取参数:$route.params.color
1
2
3

在?中的参数:query

路由:
{
    path:'/voucher',
    name: 'voucher',
    component: voucher
}
 
传参:
this.$router.push({
    path:'/xxx',
    query:{
        id:id
    }
})
 
接收参数:
this.$route.query.id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了！！！

• $router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
• $route为当前router跳转对象，里面可以获取name、path、query、params等

在json中的参数:params

路由:
{
      path: '/startWh',
      name: 'startWh',
      component: startWh
}
传参:
this.$router.push({
    name:'xxx'
    params:{
        id:id
    }
})
 
接收参数:
this.$route.params.id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意:params传参，push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！

query和params区别

• query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
• params相当于post请求，参数不会再地址栏中显示

js中定义导航,跳转

router.push('apple') //或 {path:'apple'}
或
this.$router.push('/login');
1
2
3

路由重定向

比如默认页面是具体的某一个页面,比如访问根目录,会自动跳转到Apple.vue目录

  {
      path:"/",
      redirect:'/apple'
  },
1
2
3
4

页面跳转–过渡

  <transition name='fff'>
        <keep-alive>
            <router-view>router-view>
        keep-alive>
    transition>
1
2
3
4
5