Vue中的路由设置网站首页 技术杂谈

Vue中的路由设置

许小墨~ 2024-06-14 17:18:13

简介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对代码的限制

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

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
  },