Vue路由设置 个人总结

当我们创建vue-cli项目后，我们只要了解几个文件就能解剖路由的作用

关于路由解剖去了解另一片文章Vue搭配食用

接下来这篇文章只是用来整理我所看教程的总结

1、路由

在index.js控制路由，在里面引入组件，配置路由参数

// 引入将要在路由使用的组件
import Vue from 'vue'
import Router from 'vue-router'

import Test from '@/view/test'

Vue.use(Router)

export default new Router({
// 配置路由参数
  routes: [
    {
      path: '/test',       //地址栏的地址加上这段就会显示这个组件
      name: 'test',        //这个name是命名路由才用的
      component: Test,       // 这里告诉你是绑定哪个组件
    },
    // goods组件
    {
      path: '/goods',
      name: 'goods',
      component: Goods
    }
  ]
})

嵌套路由

嵌套路由就是在路由里设置一个路由，也就是在router-view里再设置一个router-view，因为是嵌套的路由，所以在路由设置里，要在父路由的children属性下

编程式路由

就是通过写js代码来实现页面的跳转，具体看这里

命名路由

还记得我之前说的路由配置里的name属性吗，那个就是用来给命名路由用的

比如你配置了一个路由组件，name叫good

那么你在router-link那里绑定一个to属性

     // 传入一个对象

这样就能直接绑定到那个组件的位置，如果不使用这种方法，那么就要填写绝对路径了

命名视图

命名视图就是把router-view绑定显示哪个组件而已，要注意的是，它对应的是组件名，而不是name属性

通过绑定多个组件，就可以用多个router-view标签来显示不同的组件

这里告诉我们在根页面的路由配置绑定了三个组件

那么我们就可以用router-view标签的name属性来绑定要显示的组件，例如