关于vue-router路径配置的问题(此文主要是记录三级路由的访问路径,以及安装、路由组件、路由重定向)

一、路由的定义

  1. node路由:用户根据不同的url地址,来访问不同的页面

  1. vue路由(客户端):组件结合路由规则来构建单页面应用

二、下载安装

npm ——>终端输入npm i vue-router@3 -S ——>回车 (@3为版本的意思)

npm i vue-router@3 -S

三、系统提供的路由组件

<router-view></router-view> //路由出口

<router-link to=""></router-link> //路由导航

四、路由的重定向

1.一级路由重定向

{
    path:'*',             // *:任何不存在的路径
    redirect:'/contact'   //重定向路径 
}   

2.二级路由重定向

{
    path:'/index',         // index:一级路由地址
    redirect:'/index/home'   //重定向路径 
}

五、基本使用

  1. 在router文件夹下的index.js文件中创建并导出路由

// 引入vue模块
import Vue from 'vue'
// 引入VueRouter模块
import VueRouter from 'vue-router'
// Vue显示注册VueRouter
Vue.use(VueRouter)

/**
 * 创建路由对象
 * 接收参数是一个options: {}
 * 该对象中包含很多个选项: routes
 * 得到router对象
 * **/ 
const router = new VueRouter({});

// 导出
export default router
  1. 在main.js中引入路由

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from '@/router'

Vue.config.productionTip = false

// new Vue实例选项中包含很多选项: data,methods,router(路由)
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
  1. 使用步骤:

(1)引入组件 (2)配置路由规则 (3)设置路由出口

例如:在router文件夹下的index.js文件中执行(1)(2)

// 1.引入组件
import Login from '@/pages/Login'

/**
 * 创建路由对象
 * 接收参数是一个options: {}
 * 该对象中包含很多个选项: routes
 * 得到router对象
 * **/ 
const router = new VueRouter({
    // 2.设置路由规则(多个路由规则用逗号隔开)
    routes:[
        {
            path:'/login',//访问的路径
            component:Login
        },
    ]
});

在APP.vue中执行(3)

<template>
  <div>
    <!-- 设置路由出口 -->
    <!-- vue-router系统中提供的组件 -->
    <router-view></router-view>
  </div>
</template>

六、一级路由、二级路由、三级路由的访问路径

(1)一级路由。其路径为:/index

//配置路由规则
const routes=[
    {
        path:'/index',  //一级路由访问路径  ‘/index’
        component:Index, //Index是引入路由文件时定义的路由名称
    }
]

(2)二级路由:在一级路由之后使用children属性。其路径为:/index/management

(二级路由在path时不能加/)

//配置路由规则
const routes=[
    {
        path:'/index',  //一级路由访问路径  ‘/index’
        component:Index, //Index是引入路由文件时定义的路由名称
        childern:[
                    path:'management',    //二级路由访问路径 '/index/management'
                    component:Manageme,   //  Manageme是引入路由文件时定义的路由名称
                  ]
    }
]

(3)三级路由:在二级路由之后使用children属性。其路径为:/index/management/mgoodcate

//配置路由规则
const routes=[
    {
        path:'/index',  //一级路由访问路径  ‘/index’
        component:Index, //Index是引入路由文件时定义的路由名称
        childern:[
                    path:'management',    //二级路由访问路径 '/index/management'
                    component:Manageme,   //  Manageme是引入路由文件时定义的路由名称
                    childern:[
                                path:'mgoodcate',    //二级路由访问路径 '/index/management/mgoodcate'
                                component:Mgoodcate,   //  Manageme是引入路由文件时定义的路由名称
                              ]
                  ]
    }
]

(我之前在网上查的时候,有人说三级路由的路径地址前不用加一级路由地址,但是我只有都加上才能访问,大家可以自行尝试)

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值