router路由简介与使用

}

复制代码

testlink.vue（/hello是路由中配置的 随便写两个页面配置路由）

• HelloWorld1

• HelloWorld2

  复制代码

  重定向

  ---

  重定向可以配置从/a到重定向/b。这里当访问"/"时，重定向到anim的路由。/ 完成这个功能需要修改router/index.js文件。

  import Vue from ‘vue’

  import Router from ‘vue-router’

  import HelloWorld from ‘@/components/HelloWorld’

  import HelloWorld2 from ‘@/components/HelloWorld2’

  import anim from ‘@/components/Anim’

  Vue.use(Router)

  export default new Router({

  routes: [

  //配置重定向–/的时候 跳到 anim路径

  {

  path: ‘/’,

  redirect: “anim”

  },

  {

  //路径

  path: ‘/hello’,

  //引入名称

  name: ‘HelloWorld’,

  component: HelloWorld

  }, {

  //路径

  path: ‘/hello2’,

  //引入名称

  name: ‘HelloWorld2’,

  component: HelloWorld2

  },

  {

  //路径

  path: ‘/anim’,

  //引入名称

  name: ‘anim’,

  component: anim

  }

  ]

  })

  复制代码

  4.嵌套路由

  ---

  一级路由下还有超链接，能够跳不同的页面，在以上代码的情况在，在进入HelloWorld页面后，还有两个超链接 能分别跳到TestNesting1和TestNesting2。以下代码实现嵌套路由的场景。

  //TestNesting1两个随便的类 区别不同就可以了

  TestNesting1

  复制代码

  如上文一样 在HelloWorld中建立超链接 其中配置的是要跳入的路径加上本身路径。

  HelloWorld
• 11111
• 22222

• 复制代码

  最后在被跳转页接收。

  HelloWorld2

  传递的参数为{{$route.params.id}}+{{$route.params.money}}

  复制代码

  6.路由高亮

  ---

  在router/index.js中加入linkActiveClass: "active"属性，他为所有的路由加入active的class，即可实现高亮。

  export default new Router({

  //解决历史问题

  mode: ‘history’,

  //路由高亮

  linkActiveClass: “active”,

  routes: [{

  path: ‘/’,

  redirect: “anim”

  },

  {

  //路径

  path: ‘/hello’,

  //引入名称 传入参数一定要是用

  name: ‘HelloWorld’,

  component: HelloWorld,

  //TestNesting1的重定向

  //意味着在/hello时跳入/hello/TestNesting1 默认显示/hello/TestNesting1 首页功能