Vue.js路由

1.设置路由

① 路由map

在main.js中导入vue-router

import VRouter from 'vue-router'

设置全局路由

Vue.use(VRouter)

实例化router

let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    //  做一个映射表
    {
      path: '/apple',
      component: Apple
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})

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

②路由视图

在app.vue文件中嵌入

实现效果

路由视图

③ 路由导航

在app.vue文件中,嵌入router-link标签,该标签可以实现a标签的效果

to apple

具体使用:

效果:

路由导航

2.路由参数

作用:为页面传递路由参数.

在路由映射表中配置需要传递的参数:
比如:apple页面,我需要传递一个color的参数,可以在path中以:开头设置参数.

 path: '/apple/:color',

具体使用:

let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    //  做一个映射表
    {
      path: '/apple/:color',
      component: Apple
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})

当我在页面跳转时,直接在地址后面拼接参数,下面的red,即为传递的color参数

http://localhost:8080/apple/red

在script标签中获取页面传递的参数,通过this.$route.params全局的对象来获取

上面的打印结果为:

{color: "red"}

在template标签中使用界面传递过来的参数,可以使用$route.params.color

$route.params.color 获取页面传递的参数

传递多个参数

路由中设置如下:

path: '/apple/:color/detail/:type',

传递参数的url:

http://localhost:8080/apple/red/detail/3

打印传递过来的所有参数:

{color: "red", type: "3"}

3.嵌套路由(子路由)

children
嵌套路由,子路由插入到了父组件apple中

let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    //  做一个映射表
    {
      path: '/apple',
      component: Apple,
      // 嵌套路由,子路由插入到了父组件apple中
      children: [
        {
          path: 'red',
          component: RedApple
        }
      ]
    },
    {
      path: '/banana',
      component: Banana
    }
  ]
})

在父路由apple组件中,将RedApple组件插入进来

嵌套子路由

to red apple

to red apple

路由的其他操作

基于当前路径下,跳转到apple

    to apple
    上面的和下面的区别
    to banana

如果要跳到根目录,在apple前加/

    to apple
    上面的和下面的区别
    to banana

如果绑定的话,我们也可以动态的修改路径

如果绑定的话,不想动态修改路径,我们也可以直接写死,

注意:apple一定要用单引号括起来,不然他会去data里面找apple,会报找不到对象的error

to apple

也可以传递参数

to banana

通过tag,将link变成li标签,当然也可以设置变成其他标签

to apple

*以上都属于声明式导航
下面感受下编程式导航
可以通过push,跳转到特定的页面

router.push('apple')
或者
router.push({path: 'apple'})
或者name
......

应用场景:
当我们每次路由切换的时候,为他设置一些操作

比方说:检查用户的登录状态,如果用户未登录,就通过编程式导航跳转到登录界面
router.beforeEach(router.push('登录界面'))

4.命名路由和命名视图

• 命名路由
  我们可以在设置路由时,给设一个name属性,导航过程中直接:to="{name: '对应的name'}"即可

let router = new VRouter({
  mode: 'history',
  routes: [
    {
      path: '/apple',
      component: Apple,
      //命名路由
      name: 'applePage',
    }
   ......
  ]
})

在外面其他地方使用时:

to apple

• 命名视图
  和上面的命名路由相似,给component,添加指定的命名

let router = new VRouter({
  mode: 'history',
  routes: [
    {
      path: '/apple',
      //命名视图
      component: {
        viewA: Apple,
        viewB: RedApple
      },
      //命名路由
      name: 'applePage',
    }
   ......
  ]
})

在外面其他地方使用时:

或者

分别插入不同的视图

5.重定向

redirect
初始化路由时设置

let router = new VRouter({
 // 如果mode设为history, 那么地址就可以不使用哈希(# 哈希)了,就可以直接访问. http://localhost:8080/#/apple ==>> http://localhost:8080/apple
  mode: 'history',
  routes: [
    {
      //当路径为'/'时,重新跳转到apple
      path: '/',
      //设置重定向
      redirect: '/apple'
    },
    {
      path: '/apple',
      ......
    },
    {
      path: '/banana',
      ......
    }
  ]
})

重定向

6.使用过渡动画制作路由跳转动画

keep-live :切换过的视图会被缓存起来,如果不加keep-live 每次都会去重新请求一次,这样比较消耗资源

注意:

当我们切换导航的时候,当前的link标签的类会被赋值为class="router-link-active",这是一个很有用的操作.

给router-link添加active-class="active" 用于修改样式

    
     {{ item.name }}
    


css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
  background: #4fc08d;
  color: #fff;
}
......

• router-view的keep-alive属性,保证该视图只渲染一次,来回切换不重复渲染

router-view的keep-alive属性