关于vue-router路径配置的问题(此文主要是记录三级路由的访问路径,以及安装、路由组件、路由重定向)
node路由:用户根据不同的url地址,来访问不同的页面vue路由(客户端):组件结合路由规则来构建单页面应用。
·
一、路由的定义
node路由:用户根据不同的url地址,来访问不同的页面
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' //重定向路径
}
五、基本使用
在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
在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)引入组件 (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是引入路由文件时定义的路由名称
]
]
}
]
(我之前在网上查的时候,有人说三级路由的路径地址前不用加一级路由地址,但是我只有都加上才能访问,大家可以自行尝试)
更多推荐
所有评论(0)