浅谈vue-router及总结

安装

如果你用vue-cli脚手架来搭建项目，配置过程会选择是否用到路由（详细见vue-cli 脚手架），如果选择y，后面下载依赖会自动下载vue-router。

安装：npm install vue-router

创建组件

在一个模块化工程中使用它，必须要通过 Vue.use()明确地安装路由功能，如果用vue-cli生产了我们的项目结构，src文件目录下会有一个router文件夹，此处就是编写路由组件的地方。在src/router/index.js，这个文件就是路由的核心文件：










 














import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    },{
      path:'/hi',
      component:Hi,
      children:[        //子路由,嵌套路由 （此处偷个懒，免得单独再列一点）
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

router-link组件

  • router-link 是一个组件，它默认会被渲染成一个带有链接的a标签，通过to属性指定链接地址。
<router-link to="/">文字</router-link>

to：导航路径，为路由配置的path值，首页为 to="/"

router-view组件

  • router-view是用来渲染路由所对应的组件，在APP.vue里会发现里面有一个router-view组件,在后台管理系统中，一般使用router-view进行嵌套

  • 配合<keep-alive>使用，keep-alive可以缓存数据。比如对当前的路由组件a进行了一些DOM操作之后，点击进入另一个路由组件b， 再回到路由组件a的时候之前的DOM操作还保存在，如果不加keep-alive再回到路由组件a时，之前的DOM操作就没有了，得重新进行。 如果你的应用里有一个购物车组件，就需要用到keep-alive，恰当的使用keep-alive可减少请求。

<transition>
  <keep-alive>
    <router-view></router-view>
  </keep-alive>
</transition>

动态路由匹配

调用router的map方法映射路由，每条路由以key-value的形式存在，key是路径，value是组件。例如：'/home'是一条路由的key，它表示路径；{component: Home}则表示该条路由映射的组件：

router.map({
    '/home': { component: Home },
    '/about': { component: About }
})

在用一个组件，对于ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在vue-router的路由路径中使用动态路径参数来达到这个效果

例如： /user/foo 和 /user/bar 都将映射到相同的路由。 一个『路径参数』使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。 你可以在一个路由中设置多段路径参数，对应的值都会设置到 $route.params 中，所对应的值分别是foo和bar

路由传参

<router-link :to="{name:‘dxl’,params:{key:value}}">东西里</router-link>
  • name：就是我们在路由配置文件中起的name值。 另：命名路由就是用一个名称来标识一个路由，在定义路由的时候设置一个name属性即可。在router-link中也可以用路由的名字来链接到一个路由。
  • params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。 最后用$route.params.username进行接收.

用url传参

上面提到过 :冒号的形式传递参数

  • 在router路由配置文件里以冒号的形式设置参数
export default new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path:'/params/:newsId/:userName',//这里传输了 newsId 和  userName两个参数
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
  ]
})

响应路由参数的变化

watch检测

  • watch（监测变化） $route 对象：
export default {
  name: 'Tags',
  watch: {
      '$route' (to, from) {
        // 对路由变化作出响应...
      }
  }
}

导航守卫

  • beforeRouteUpdate 导航守卫

如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate来响应这个变化 (比如抓取用户信息)，也开始使用导航守卫来控制前端页面权限。

export default {
  name: 'Tags',
  beforeRouteUpdate (to, from, next) {
         // 需要对路由做的操作
         // 不要忘记调用 next()
   }
}

实现不同路由页面标题

  • 使用afterEach钩子函数实现，亦可以使用导航守卫beforeRouteUpdate
const routes = [
  { path: '/goods', component: goods, name: 'goods' },
  { path: '/orders', component: orders, name: 'orders' },
  { path: '/seller', component: seller, name: 'seller' }
];
// 创建路由实例
const router = new VueRouter({
  routes: routes
})
// 关键在这里，设置afterEach钩子函数
router.afterEach((to, from, next) => {
  document.title = to.name;
})

重定向

刚进入应用都是进入到“/”这个路由的，如果想直接进入到“/goods”怎么办，有两种方法。一种是利用重定向，另一种是利用vue-router的导航式编程。

redirect基本重定向

const routes = [
  { path: '/', redirect: '/goods'}
]
//重定向的目标也可以是一个命名的路由。
const routes = [
  { path: '/', redirect: { name: 'goods' }}
]
//重定向时也可以传递参数
{
  path:'/',
  redirect:'/goods/:newsId(\\d+)/:userName'
}

alias别名的使用

配置好别名后再router-link的to中即可直接填入别名，注意path为/时别名无效

export default new Router({
  routes: [              
    {                    
      path:'/test',
      name: 'Hello',     
      component: Hello,  
      alias:'/dll'
    }
  ]
})

区别：

  • redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
  • alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了<router-view>中的内容。

编程式导航

  • router.push()

想要导航到不同的 URL，则使用 router.push (在创建vue实例并挂载后调用)。router.push方法就是用来动态导航到不同的链接的，这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

const userId = 666
router.push({ name: 'user', params: { userId }}) // -> /user/666
router.push({ path: `/user/${userId}` }) // -> /user/666
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user
  • router.replace()

router.replace跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

  • router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

router.go(1)
// 后退一步记录，等同于 history.back()
router.go(-1)

自定义一个back()方法，并使用this.$router.go(-1),进行后退操作

<script>
export default {
  name: 'app',
  methods:{
    back(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}
</script>