#|【Vue 路由（vue—router）一】介绍、基本使用、嵌套路由的基础学习|vue.js|前端|javascr

目录
前言
一、介绍、安装
1.定义
2.安装
1：在src根目录创建router目录，在目录中创建index.js，代码如下：
2：main.js 中进行挂载
二、基本使用（代码后赋）
展示效果
代码（看对应的代码段）
app.vue代码，此代码含有样式
三个路由组件的代码
router
三、嵌套路由
1.布局逻辑
2.效果展示
3.代码
about
两个路由组件
四、注意

前言

想要学习完整内容请关注主页的专栏————>Vue学习

本次的代码段是结合体，被我分开发文，我以在看代码段时，已经截图展示，所看部分

一、介绍、安装 1.定义 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
路由：route一组key-v的对应关系(路径的改变对应的组件进行切换)
路由器：router多个路由需要路由器管理
为了实现单页面应用
2.安装

npm i vue-router@3安装3版本
如果使用 vue ui 就没有以下的操作，因为在创建项目的时候已经配置好了

1：在src根目录创建router目录，在目录中创建index.js，代码如下：

import Vue from 'vue'; //导入vue-routerimport VueRouter from 'vue-router'//应用插件Vue.use(VueRouter)//创建router规则对象const routes = []//创建routerconst router = new VueRouter({routes})//导出routerexport default router

2：main.js 中进行挂载

import Vue from 'vue' import App from './App.vue'import router from './router'Vue.config.productionTip = falsenew Vue({router,render: h => h(App) }).$mount('#app')

二、基本使用（代码后赋）以下例子展现路由的基本使用
css样式已经写好了，直接实现路由效果
展示效果首先学习的效果

文章图片

文章图片

【#|【Vue 路由（vue—router）一】介绍、基本使用、嵌套路由】

文章图片

代码（看对应的代码段） app.vue代码，此代码含有样式

.c{ clear: both; } *{ margin: 0px; padding: 0px; } li{ list-style: none; } a{text-decoration: none; } .main{width: 800px; margin: auto; } .header{box-sizing: border-box; padding: 20px; border:1px solid #666; } .left{ height: 500px; border: 1px solid #666; width: 200px; float: left; } .left li{ height: 50px; line-height: 50px; text-align: center; border-bottom: 1px solid #666; width: 100%; } .left li a{ color: #333; display: block; } .left li a.hover{ background: blue; color: #fff; } .right{float: right; border:1px solid #61DAFB; width: 590px; height: 500px; } .nav li{ float: left; } .nav li a{ width: 150px; text-align: center; height: 40px; line-height: 40px; text-align: center; border:1px solid #000000; display: block; } .nav li a.hover{ background: #0000FF; color: #fff; }

三个路由组件的代码
about

ContaactUs

persons

router

import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import About from '../pages/About' import ContaactUs from '../pages/ContaactUs' import Persons from '../pages/Persons' // import Show from '../pages/Show' // import Profile from '../pages/Profile' // import People from '../pages/People' const routes = [ { path:'/about', component:About, children:[ // {name:'profile',path:'/about/year',component:Profile,meta:{isAuth:true}}, // {name:'people',path:'/about/people',component:People,meta:{isAuth:true}}, // { //path:'/about', //redirect:'/about/year' // }, ]}, { path:'/contaactus', component:ContaactUs }, { path:'/persons', component:Persons, // children:[ //{ //path:'show/:id/:realname',component:Show,props:true //// name:'show',path:'show',component:Show //} // ] }, { path:'/', redirect:'/about' }, ]const router = new VueRouter({ mode:'history', routes })// router.beforeEach((to,from,next)=>{//if(to.name=="people" || to.name=="profile"){ //if(localStorage.getItem("token")=="123"){ //next(); //} //}else{ //next(); //} // })// router.beforeEach((to,from,next)=>{//if(to.meta.isAuth){ //if(localStorage.getItem("token")=="123"){ //next(); //} //}else{ //next(); //} // })export default router