Vue中的路由设置

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
后端系列文章——传送门

---

---

路由配置

下载

vue中要使用路由，需要依赖第三方模块 - vue-router

版本之间要有配合：

vue2 + vue-router@3

vue3 + vue-router@4

下载对应的版本：

npm i vue-router@3

配置

需要在src文件夹下新建一个文件夹，文件夹下新建index.js，在这个文件中配置路由。

// 导入vue
import Vue from 'vue'
// 导入vue-router
import VueRouter from 'vue-router'

// 导入路由规则中要是用的组件
import IndexCom from '../views/IndexCom.vue'
import ListCom from '../views/ListCom.vue'
import MyCom from '../views/MyCom.vue'
// vue使用router
Vue.use(VueRouter)
// 创建路由规则
const routes = [
  // 数组中放对象
  {
  // path - 指定路径
    path: '/index',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: IndexCom
  },
  {
    // path - 指定路径
    path: '/list',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: ListCom
  },
  {
    // path - 指定路径
    path: '/my',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: MyCom
  }
]

// 创建路由对象
const router = new VueRouter({
  // routes - 指定路由规则
  routes,
  // 路由模式 - hash/history
  mode: 'hash'
})

// 导出路由对象
export default router

在根组件中使用路由对象，在main.js中：

// 导入路由对象
import router from '@/router'

// 将路由对象放在根组件实例中
new Vue({
  // 在根实例中使用路由对象 - router键
  router,
  render: h => h(App)
}).$mount('#app')

此时，当我们切换路径就可以显示对应的组件了。

eslint对代码的限制

1. 导入文件需要在最顶端
2. 不允许超出一个的空行
3. 缩进是2个空格
4. 最后一项不允许加逗号
5. 文件结尾必须有一个空行
6. 组件名称必须是多个单词组合
7. 注册的组件必须使用
8. 无用的空行不被允许
9. 每行代码结尾后不允许有空格
10. 函数的小括号前后都要有空格
11. 对象键值对之间的冒号后，必须有空格
12. 每行结尾不用分号
13. 对象的开头大括号后必须有空格，对象的结尾大括号前必须有空格
14. 逗号后面必须加空格

main.js是入口文件，显示什么内容，都由main.js控制。

单文件组件，后缀是.vue的文件，有3个内容：template标签，script标签，style标签。

router-view内置组件，要显示的组件在这里占位。

vue文件在编辑器中无法像正常代码一样显示(灰白色)，装vacode插件 - vetur

声明式导航

概念：就是像a标签一样点击跳转的导航方式

使用内置组件router-link的to属性进行设置跳转地址。

<router-link to="/index">首页</router-link>
<router-link :to="'/list'">列表页</router-link>
<router-link :to="{path: '/my'}">我的</router-link>

传递参数：

<router-link :to="{path: '/my', query: {name: 'zhangsan'}}">我的</router-link>

上面都是使用路由的path属性进行跳转了，也可以使用路由的name属性进行跳转：

const routes = [
  // 数组中放对象
  {
    // path - 指定路径
    path: '/index',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: IndexCom,
    // 路由除了path和component外，还可以配置name
    name: 'index'
  },
  {
    // path - 指定路径
    path: '/list',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: ListCom,
    name: 'list'
  },
  {
    // path - 指定路径
    path: '/my',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: MyCom,
    name: 'my'
  }
]

利用name设置跳转地址：

<router-link :to="{name: 'my'}">我的</router-link>

传递参数除了可以使用query外，还可以使用params，query表现在地址栏，params就不在地址栏：

<router-link :to="{name: 'my', query: {age: 12}}">我的</router-link>
<router-link :to="{name: 'my', params: {age: 12}}">我的</router-link>

默认情况下router-link被编译成a标签了，如果想让他编译成其他标签，可以设置tag属性：

<router-link tag="p" :to="{path: '/my', query: {name: 'zhangsan'}}">我的</router-link>

页面中的router-link就会别编译成p标签。

接收声明式导航传参

query传递的参数，在页面中接收，使用：

// 在js逻辑代码中
this.$route.query

在模板中：

{{$route.query}}

用params传递参数，接收：

this.$route.params

在模板中：

$route.params

编程式导航

概念：在js中像location.href一样去跳转的导航方式

this.$router.push('路径')
this.$router.push({path:'路径'})
this.$router.push({path:'路径', query: {参数}})
this.$router.push({name:'路由名称', query: {参数}})
this.$router.push({name:'路由名称', params: {参数}})
// 基本不用
this.$router.go()
this.$router.back()

注意：不允许跳转到当前路径

可以加两行代码搞定错误：

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch((err) => err)
}

放在router/index.js中。

子路由配置

在父组件中要显示子组件，就需要在父路由中配置子路由。在父路由中用children配置子路由。

const routes = [
  // 数组中放对象
  {
    // path - 指定路径
    path: '/index',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: IndexCom,
    // 路由除了path和component外，还可以配置name
    name: 'index'
  },
  {
    // path - 指定路径
    path: '/list',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: ListCom,
    name: 'list',
    // 路由中通过children配置子路由的
    children: [
      {
        path: '/catlist',
        component: CatList
      },
      {
        path: 'goodslist', // 子路由的path不加 / ，表示要访问到这个路由，完整路径应该是 父路由的path + 子路由的path
        // 也就是说 - /list/goodslist 才能访问到 GoodsList 这个组件
        component: GoodsList
      }
    ]
  },
  {
    // path - 指定路径
    path: '/my',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: MyCom,
    name: 'my'
  }
]

重定向路由

概念：当我们访问路径1的时候，希望显示路径2对应的组件，给路径1配置路由的时候，不配置component，配置redirect，让这个路径跳转到路径2就ok。

// 重定向路由
  {
    path: '/',
    // 指定跳转到某个路径
    redirect: '/index'
  },
  // 数组中放对象
  {
    // path - 指定路径
    path: '/index',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: IndexCom,
    // 路由除了path和component外，还可以配置name
    name: 'index'
  },

404路由

当用户访问了一个没有配置过的路径的时候，应该给用户显示比较友好的404页面，需要配置404路由。

404路由必须配置在所有路由的最后：

const routes = [
  // 重定向路由
  {
    path: '/',
    // 指定跳转到某个路径
    redirect: '/index'
  },
  // 数组中放对象
  {
    // path - 指定路径
    path: '/index',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: IndexCom,
    // 路由除了path和component外，还可以配置name
    name: 'index'
  },
  {
    // path - 指定路径
    path: '/list',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: ListCom,
    name: 'list',
    // 路由中通过children配置子路由的
    children: [
      {
        path: '/catlist',
        component: CatList
      },
      {
        path: 'goodslist', // 子路由的path不加 / ，表示要访问到这个路由，完整路径应该是 父路由的path + 子路由的path
        // 也就是说 - /list/goodslist 才能访问到 GoodsList 这个组件
        component: GoodsList
      }
    ]
  },
  {
    // path - 指定路径
    path: '/my',
    // component - 指定 当路径是/index的时候，显示哪个组件
    component: MyCom,
    name: 'my'
  },
  // 404路由必须配置在所有路由的最下面
  {
    path: '*', // 任意路径
    component: NotFound // 显示 NotFound 组件
  }
]

动态路由

指的是restful风格的路径，指定这个路径中必须加参数，或某个参数可选

// 动态路由 - restful风格的路径
  {
    path: '/news/:id', // 指定当前路径必须有id参数
    component: NewsDetail
  },
      // 动态路由 - restful风格的路径
  {
    path: '/news/:id?', // 指定当前路径id参数可选
    component: NewsDetail
  },

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog