猫说

vue router

2018/06/17 vue

路由简介

休息在家闲着也是闲着，在公司好久没有用vue了，有一些忘记了，写篇博客温故一下。

1、路由：在web开发中，路由是指根据url分配到对应的处理程序。

2、vue-router： 通过管理url实现url和组件的对应和通过url进行组件间的切换。

3、使用的必备三部曲，2/3步都是在main.js里面的。

  1、安装：npm install vue-router --save
  2、引入：import VueRouter from 'vue-router'
  3、使用：Vue.use(VueRouter )

4、正式使用vue-router，需要new一个对象，

  const router = new VueRouter({ // 你的配置... })

5、注入vue实例中

  new Vue({
    el: '#app',
    router
  })

如果变量名不为router的话，在注入实例中需要写成router: routerName

6、路由视图渲染：在APP.vue文件中，找到想渲染的位置：

7、router的配置： 配置接受一个routes的字段，值是一个对象数组，是每一个路由的配置。

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

Home是引入的一个组件，想渲染哪个组件引入哪个：import Home from '@/components/home.vue' vue后缀可以不写，@符号代表src路径。

8、当你路由很多的时候，配置都写在main.js里面很不方便啊，这个时候可以新建一个单独的js文件作为路由文件，在src目录下，新建一个router的文件夹，里面建一个index.js，名字随意。 文件基本配置，和在main.js里面一样：

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
  import Home from '@/compontents/home'
  let router = new VueRouter({// .... 路由配置})
  // 关键的一步：把配置暴露出去。
  export default router;

  // 然后在main.js文件里面引入
  import router from '@/router/index'
  // 引入成功后注入实例中。

9、hash和history模式，默认是hash模式，地址栏’xxx.com/#/????’ ，history模式地址栏：’xxx.com/???’,明显history模式更好一点,history模式可以使用浏览器默认的前进后退功能。 设置：在路由实例中

  const router = new VueRouter({
   mode: 'history',
   routes: [
    { path:'/', component: Home }
   ]
  })

10、用a标签设置跳转链接的话页面会刷新，所以用vue提供的 router-link 组件。 <router-link to="/"> home </router-link>

11、router-link的配置 ① 动态插入url： <router-link :to="url" > home </router-link>

② 对象形式： <router-link :to="{path: '/'}" > home </router-link>

③ 改变默认的标签，router-link 渲染出来默认的是a标签， 可以修改 <router-link :to="url" tag="div" > home </router-link>

④ router-link的点击态的样式类名设置： 全局设置的话需要在路由实例里面配置const router = new VueRouter({ linkActiveClass: 'activeName' }), 单个router-link配置的话 <router-link :to="url" tag="div" active-class="className" > home </router-link>

⑤ 改变事件触发： <router-link event="mouseover" > home </router-link>

12、重定向：

  {path: '*', redirect: '/404'}
  redirect: {path: '/home'}
  redirect: {name: 'Home'}
  redirect: to => '/home'

Search

    Table of Contents