vue router 默认路由,vue-router常用的路由模式
本文详细介绍了VueRouter路由的概念、规则、依据等相关内容。它用了大量的图片来解释。感兴趣的朋友可以看看这篇文章。
目录
vue router1知道路由1.1的概念，什么是路由1.2，后端路由阶段1.3，前端路由阶段1.4，前端渲染和后端渲染？2.前端路由的规则2.1、URL的哈希模式2.2、HTML5的历史模式3、route-view的基础3.1了解vue-router3.2、安装并使用vue-router3.3、路由的默认路径3.4、HTML5的历史模式3.5、router-link补充3.6、代码跳转3.7、动态路由4、惰性加载4.1、惰性加载4.2、惰性加载效果4.3、惰性加载模式5、嵌套使用5.1、意识到嵌套路由
vue router
1、认识路由的概念
1.1、何为路由
通过互联网将信息从源地址传输到目的地址的活动。
1.2、后端路由阶段
网站开发前期，整个HTML页面都是由服务器渲染的。
服务器直接产生并呈现相应的HTML页面，并将其返回给客户端进行显示。
但是，如何处理一个有这么多页面服务器的网站呢？
一个页面有自己对应的URL，即URL。
URL将被发送到服务器，服务器将通过正则化来匹配URL，并最终将其交给控制器进行处理。
控制器进行各种处理，最后生成HTML或者数据，返回给前端。
这就完成了一个IO操作。
以上操作为后端路由。
当我们需要在页面中请求不同的路径内容时，我们会将其交给服务器进行处理。服务器将呈现整个页面并将页面返回给客户端。
这种情况下，渲染后的页面不需要单独加载任何js和css，可以直接呈现到浏览器中进行显示，也有利于SEO优化。
后端路由的缺点：
一种情况，整个页面的模块都是后端人员编写和维护的。
另一种情况，前端开发人员要开发页面，需要用PHP、Java等语言编写页面代码。
通常HTML代码和数据以及对应的逻辑是混在一起的，所以编写和维护是一件非常糟糕的事情。
1.3、前端路由阶段
结束分离阶段：
Ajax的出现，有了前端分离的开发模式。
后端只提供API返回数据，前端通过Ajax获取数据，可以通过JavaScript将数据渲染到页面中。
这样做最大的好处就是前后职责明确，后端专注于数据，前端专注于交互和可视化。
而当移动端(iOS/Android)出现时，后端不需要任何处理，仍然使用之前的那套API。
目前很多网站还是采用这种开发模式。
页面丰富的应用阶段：
其实SPA的主要特点就是在前端分离的基础上再加一层前端路由。
也就是说，前端维护一组路由规则。
前端路由的核心是什么？
改变网址，但页面整体不刷新。
如何实现？
1.4、前端渲染和后端渲染？
前端渲染:服务器直接产生并渲染相应的HTML页面，返回给客户端显示。例如：jsp页面
后端渲染:后端返回JSON数据，前端使用预先编写的html模板循环读取JSON数据，拼接字符串，插入页面。
2、前端路由的规则
2.1、URL的hash 方式
位置描述
location.href效果页面完全刷新。
Location.hash部分刷新，而不是完全刷新。
2.2、HTML5的history模式
推送状态后堆栈结构
功能：先进后出推式状态：栈内后退：栈外
效果如下
replacement状态返回替换
回不去了。
去
History.go(-1)后退一步
History.go(1)=history.forward()向前一步
3、route-view的基础
3.1 认识vue-router
Vue-router是基于组件和路由实现的。
路由用于设置访问路径以及映射路径和组件。
在vue-router的单页面应用中，页面路径的改变就是组件的切换。
3.2、安装和使用vue-router
使用webpack创建工程开发
安装npm安装vue-路由器-保存
模块化使用
导入路由对象并调用Vue.use(VueRouter)。
创建一个路由实例，并传入路由映射配置。
在vue实例中挂载创建的路由实例
使用vue路由器步骤
创建工艺路线组件
配置路由映射、组件和路径映射关系。
About.vue
模板
差异
H2大约是/h2。
p我说的是内容，呵呵呵/p
/div
/模板
脚本
导出默认值{
名称：“关于”
}
/脚本
样式范围
/风格
Home.vue
模板
差异
H2是主页/h2
p我是首页内容哈哈哈/p
/div
/模板
脚本
导出默认值{
名称：“家”
}
/脚本
样式范围
/风格
路由器- index.js
//创建一个VueRouter对象
常量路由=[
{
路径： ，
！-路线的默认值-
//默认加载页面直接访问主页。
重定向：“/home”
},
{
路径：“/home”，
组件：主页
},
{
路径：“/about”，
组件：关于
},
]
const router=new VueRouter({
//配置路由和组件之间的应用关系
路线，
模式：“历史”，
linkActiveClass:“活动”
})
使用router-link和router-view显示路由。
模板
div id=应用程序
路由器链接到=/home 主页/路由器链接
路由器链接到= about about/路由器链接
路由器-视图/
/div
/模板
粗略流动
1.通过说明创建vue项目。
vue创建vuerouterstudy
2.删除默认生成的HelloWorld组件的相关信息。
3.创建一个路由实例，并传入路由映射配置。
Home.vue
模板
差异
我是主页内容。
/div
/模板
索引. js
从“vue路由器”导入vue路由器
从“vue”导入Vue
从以下位置导入主页./组件/主页
//1.通过Vue.use(插件名称)安装插件
Vue.use(VueRouter)
//2.创建VueRouter对象
常量路由=[
{
路径：“/home”，
组件：主页
}
]
//3.配置路线和组件之间的映射关系。
const router=new VueRouter({
路线
})
//4.将路由器对象传递到Vue实例中。
导出默认路由器
使用路由
App.vue
模板
div id=应用程序
！-呈现超链接a -
路由器链接到=/home tag= button 主页/路由器链接
路由器-link to=/about tag= button about/router-link
！-动态渲染组件-
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
组件：{}，
};
/脚本
风格
/风格
简要描述组件
Router-link:这个标签是vue-router的内置组件，最终会用一个A链接呈现。
Router-view:这个标签会根据当前路径动态渲染不同的组件。
网页的其他内容，如顶部的标题导航，或底部的一些版权信息，都用router-view注册。
切换路由时，交换机是路由器视图挂载的组件，其他内容不变。
最终效果图
3.3、路由的默认路径
默认情况下，当进入网站主页时，我们希望router-view呈现主页的内容。
然而，在我们的实现中，默认情况下不显示主页组件，用户必须单击它。
如何使路径默认跳转到主页，并且路由器视图呈现主页组件？
非常简单，我们只需要再配置一个映射。
配置分析
我们在routes中配置了另一个映射。
路径是用根路径配置的：/
重定向，就是我们把根路径重定向到/home的路径，这样就可以得到想要的结果。
3.4、HTML5的history模式
页面默认是url的哈希模式。
要在html5中将其更改为history，可以对其进行配置。
修改
3.5、router-link补充
Attribute:标记可以指定稍后将呈现什么组件。例如，上面的代码将呈现为一个元素，而不是
Replace属性：replace不留下历史记录，所以当指定replace时，back键不能返回上一页。
Active-class属性：当对应的路由匹配成功时，会自动为当前元素设置一个router-link-active class，默认名称可以通过设置active-class来修改。
这个类将在突出显示的导航菜单或底部的标签栏中使用。
但是，该类的属性通常不会被修改，可以直接使用默认的router-link-active。
您也可以通过这种方式在路由中配置index.js。
3.6、路由代码跳转
源码实现
模板
div id=应用程序
！-呈现超链接a -
！-router-link to=/home tag= h1 替换主页/router-link-
！-router-link to=/about tag= h1 替换active-class About/router-link-
按钮@click=handleHome 主页/按钮
按钮@click=handleAbout 关于/按钮
！-动态渲染组件-
路由器视图/路由器视图
/div
/模板
脚本
导出默认值{
名称：“应用程序”，
组件：{}，
方法：{
handleHome(){
这个。$router.push(/home )
},
handleAbout(){
这个。$router.push(/about )
}
}
};
/脚本
款式/风格
效果图
3.7、动态路由
在某些情况下，页面的路径可能是不确定的。例如，当我们进入用户界面时，我们希望下面的路径：
/user/aaaa或/user/bbbb
除了前面的/user，后面跟着用户的ID。
这种路径和组件的匹配关系称为动态路由(也是路由传输数据的一种方式)。
1.配置组件和路径之间的映射关系。
//配置与路由相关的信息
从“vue”导入Vue
从“vue路由器”导入vue路由器
从以下位置导入主页./组件/主页
关于从导入./组件/关于
导入用户自./组件/用户
//通过Vue.use (plugin)安装插件
Vue.use(VueRouter)
//创建一个VueRouter对象
常量路由=[
{
路径： ，
重定向：“/home”
},
{
路径：“/home”，
组件：主页
},
{
路径：“/about”，
组件：关于
},
！-这是关键代码-
{
路径：“/user/:id”，
组件：用户
},
]
const router=new VueRouter({
//配置路由和组件之间的应用关系
路线，
模式：“历史”，
linkActiveClass:“活动”
})
//将路由器对象传递到Vue实例中
导出默认路由器
2.创建组件useruser.vue。
模板
差异
H1我是应用程序页面/h1
{{$route.params.id}}
/div
/模板
3.主页显示
App.vue
Router-link to=/home/geek mouse 测试以获取用户名/router-linkbr
4.翻译
4、路由的懒加载
4.1、认识懒加载
官方给出的解释是：
在应用打包构建的时候，Javascript包会变得非常大，影响页面加载。
如果能把不同路由对应的组件分成不同的代码块，然后在访问路由时加载相应的组件，效率会更高。
官方说法是什么？
首先，我们知道路由中通常会定义很多不同的页面。
这个页面最后打包在哪里？一般来说，它放在一个js文件中。
然而，js文件中有这么多页面，这个页面肯定会非常大。
如果我们一次性向服务器请求这个页面，可能需要一些时间，甚至用户的电脑都有短暂的空白。
如何避免这种情况？就用路由懒加载吧。
懒加载做了什么？
懒加载的主要作用是将路由对应的组件打包成js代码块。
只有当访问此路由时，才会加载相应的组件。
4.2、懒加载效果
//配置与路由相关的信息
从“vue”导入Vue
从“vue路由器”导入vue路由器
const Home=()=import(./组件/主页’)
const About=()=import(./组件/关于’)
const User=()=import(./组件/用户’)
//通过Vue.use (plugin)安装插件
Vue.use(VueRouter)
//创建一个VueRouter对象
常量路由=[
{
路径： ，
重定向：“/home”
},
{
路径：“/home”，
组件：主页
},
{
路径：“/about”，
组件：关于
}, {
路径：“/user/:id”，
组件：用户
},
]
const router=new VueRouter({
//配置路由和组件之间的应用关系
路线，
模式：“历史”，
linkActiveClass:“活动”
})
//将路由器对象传递到Vue实例中
导出默认路由器
4.3、懒加载方式
5、路由的嵌套使用
5.1、认识嵌套路由
嵌套路由是一个很常见的功能
比如在家页面中，我们希望通过/首页/新闻和/主页/消息访问一些内容。
一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。
组件和路径关系
5.2、实现过程
1、创建两个组件消息，新闻
Message.vue
模板
div id=关于最新消息/div
/模板
脚本
/脚本
新闻。某视频剪辑软件
模板
div id=关于新闻内容/div
/模板
脚本
/脚本
2、配置路由信息主要是子路由
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
const Home=()=import(./组件/主页)
const About=()=import(./组件/关于)
常量消息=()=导入(./组件/消息)
const News=()=import(./组件/新闻)
//1、通过Vue.use(插件名)安装插件
vue。使用(vue路由器)；
//2、创建武鲁特对象
常量路由=[
{
路径："/home "，
成分：家，
儿童：[
{
路径："新闻",
组件：新闻
},
{
路径："邮件",
组件：消息
}
]
},
{
路径："/home/:用户名",
组件：主页
},
{
路径："/关于"，
组件：关于
}
]
//3、配置路由和组件之间映射关系
const router=new VueRouter({
路线，
模式："历史",
//linkActiveClass: active
})
//4、将路由器对象传入某视频剪辑软件实例
导出默认路由器
3、父组件渲染子组件信息
Home.vue
模板
div id=home
我是首页内容英国铁路公司
路由器-链接到=/家庭/新闻新闻/路由器链接
路由器-链接到=/home/message 消息/路由器链接
路由器视图/路由器视图
！- h2用户名：{{ $route.params.username }}/h2 -
/div
/模板
脚本
导出默认值{
姓名：家，
};
/脚本
4、效果图
5.3、嵌套路由的默认路径
重定向再直接的
{
路径："/用户",
组件：用户，
儿童：[
{
路径："邮件",
组件：消息，
},
{
路径："新闻",
组件：新闻，
},
//重定向/用户/新闻
{
路径： ,
重定向："新闻",
},
]
},
6、路由传递参数
传递参数主要有两种类型：参数和查询params类型
1.配置路由格式：/router/:id
2.传递的方式：在小路后面跟上对应的值
3.传递后形成的路径：/router/123，/router/abc
query类型
1.配置路由格式：/路由器，也就是普通配置
2.传递方式：对象中使用询问的键作为传递方式
3.传递后形成的路径：/路由器？id=123，/路由器？id=abc
6.1、准备工作
传递参数之一：路由器链接
1、创建组件Profile.vue
模板
差异
氘我是轮廓页面/h2
p我是轮廓页面具体内容/p
！-获取字符串入参譬如：/profile/123 -
p $路线。params:{ { $ route。params } }/p
！-获取对象类型入参譬如：/个人资料？name=1age=10 -
p $路线。查询：{ { $ route。查询} }/p
/div
/模板
脚本
导出默认值{
名称："个人资料",
};
/脚本
样式范围
/风格
2、配置路由
const Profile=()=import(./组件/配置文件)
{
路径："/profile/:id "，
组件：配置文件
}
3、app.vue 页面显示
路由器链接
:to={
路径：/profile/ 123，
查询：{姓名： 极客鼠，爱好：篮球 }
}
tag=button
路由器链接传递参数/路由器链接
4、最终效果
传递参数之二：js实现
button @ click= jsTransferParams js传递参数/按钮
jsTransferParams() {
这个. router.push({
路径：/profile/ 666，
查询：{姓名： 极客鼠，爱好：探索黑科技 },
});
},
profile.vue获取参数
p $路线。params:{ { $ route。params } }/p
p $路线。查询：{ { $ route。查询} }/p
6.2、获取参数
获取参数通过$路线对象获取的。
在使用了某视频剪辑软件路由器应用中，路由对象会被注入每个组件中，赋值为这个1000美元路线，并且路由切换时候，路由对象会被更新。
$路线传递的信息如下
6.3、router和route区别
简单理解即一个获取路由信息，一个是用来操作路由的；
$路由器为武鲁特实例，想要导航到不同URL，则使用$router.push方法
路由的跳转方法，钩子函数等
$路线为当前路由器跳转对象里面可以获取名称、元、路径、哈希、查询、参数、完整路径、匹配、重定向自等
7、路由导航守卫
某视频剪辑软件路由器提供的导航守卫主要用来监听路由的进入和离开的
某视频剪辑软件路由器提供了每个之前和每次之后的钩子函数，它们会在路由即将改变前和改变后触发
利用每个之前完成标题的修改
首先，我们可以在钩子中定义一些标题，可以利用自指的来定义
其次，利用导航守卫，修改我们的标题
//配置路由相关的信息
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
const Home=()=import(./组件/主页)
const About=()=import(./组件/关于)
const User=()=import(./组件/用户)
常量消息=()=导入(./组件/消息)
const News=()=import(./组件/新闻)
const Profile=()=import(./组件/配置文件)
//通过Vue.use(插件),安装插件
Vue.use(VueRouter)
//创建武鲁特对象
常量路由=[
{
路径： ,
重定向："/home "
},
{
路径："/home "，
成分：家，
元：{
标题： 首页
}
},
{
路径："/profile/:id "，
组件：配置文件，
元：{
标题： 档案
}
},
{
路径："/关于"，
组件：关于，
元：{
标题： 关于
}
}, {
路径："/用户",
组件：用户，
儿童：[
{
路径："邮件",
组件：消息，
},
{
路径："新闻",
组件：新闻，
},
{
路径： ,
重定向："新闻",
},
]
},
]
const router=new VueRouter({
//配置路由和组件之间的应用关系
路线，
模式："历史",
linkActiveClass:"活动"
})
router.afterEach(收件人，发件人，下一个)={
文档。title=to。匹配了[0]。meta。标题；
下一个()
})
//将路由器对象传入某视频剪辑软件实例
导出默认路由器
效果图
简要说明
导航钩子的三个参数解析
收件人：即将要进入的目标的路由对象
出发地：当前导航即将离开的路由对象
然后调用该方法之后，才能进入下一个钩子
8、keep-alive
这个组件某视频剪辑软件的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染多姆。
案例说明理解一下
需求：现在有两个组件保持开始，保持结束组件，保持启动组件有投入输入框，输入信息可以缓存保持结束组件不能缓存
源码实现
1、KeepStart.vue
模板
差异
氕开始页面/h1
输入类型=text placeholder=请输入。
/div
/模板
2、KeepEnd.vue
模板
差异
氕不需要缓存页面/h1
输入类型=text placeholder=请输入
/div
/模板
3、路由器索引
const KeepStart=()=import(./组件/保持启动’)
const KeepEnd=()=import(./components/KeepEnd’)
{
路径："/keepStart "，
组件：KeepStart，
名称：保持开始，
元：{
保持活动状态：真
}
},
{
路径："/keepEnd "，
名称：保持结束，
组件：KeepEnd，
元：{
keepAlive: false
}
}
4、App.vue
路由器-链接到=/keep start tag= button keep start页面/路由器链接
路由器-链接到=/keepEnd tag= button keepEnd页面/路由器链接
！-动态渲染组件-
！-路由器视图/路由器视图-
点火电极
路由器视图v-if= $ route。meta。keepalive /路由器视图
/保持活力
路由器-查看v-if=！$ route。meta。keepalive /路由器视图
效果图
9、TabBar练习
9.1、需求表述
效果图
表述
实现一个导航栏，分别是分类，首页，购物车，我的四个栏目；用户点击各自的栏目显示不同页面；采用插槽的思想来实现可扩展性。
9.2、需求分析
1、如果在下方有一个单独的标签栏组件，如何安装
自定义标签栏组件，在应用中使用
让标签栏处于底部，设置相关的样式
2、TabBar中显示的内容由外部决定
定义插槽
弯曲布局评分标签栏
3、自定义TabBarItem，可以传入图片和文字
定义TabBarItem，并且定义两个插槽：图片，文字
给两个插槽外层包装div，用于设置样式
填充插槽，实现底部标签栏的效果
4、传入选中高亮图片
定义另外一个插槽，插入活动图标的数据
定义个变量我很活跃，通过虚拟展示来决定是否显示对应的图标
5、TabBarItem绑定路由数据
安装路由新公共管理安装vue-路由器-保存
完成路由器-index.js创建对应的组件
主页。射流研究…注册路由器
App.vue加入路由器视图组件渲染
6、点击项目跳转到对应路由表，并且动态绝对判断是否处于执行状态
监听项目的点击，通过这个. router.replace()替换路由路径
通过这个. route.path.indexOf(this.link)！==-1 来判断是否是活跃的
7、动态计算活跃的样式
封装新的计算属性这是主动的吗？{color:red}:{}
9.3、需求实现
实现版本1
创建某视频剪辑软件项目
创建导航栏
删除无用的组件编译图片
简易目录结构
App.vue
模板
div id=应用程序
div id=tab-bar
div id=tab-bar-item 首页/div
div id=tab-bar-item 分类/div
div id=tab-bar-item 购物车/div
div id=tab-bar-item 我的/div
/div
/div
/模板
脚本
导出默认值{
名称："应用程序",
组件：{},
};
/脚本
风格
/* 引入钢性铸铁样式*/
@导入url(./assets/CSS/base。CSS’)；
#选项卡栏{
显示器：flex
背景色：rgb(246，246，246)；
/* 绝对定位*/
位置：固定；
左：0;
底部：0;
右：0;
}
#标签栏项目{
flex:1；
文本对齐：居中；
高度：49px
}
/风格
base.css
正文{
填充：0;
边距：0;
}
效果图
最终版本
目录结构
关键源码实现
TabBar.vue封装
模板
div id=tab-bar
插槽/插槽
/div
/模板
脚本
导出默认值{
名称：" TabBar "
}
/脚本
样式范围
#选项卡栏{
显示器：flex
背景色：# f6f6f6
位置：固定；
左：0;
右：0;
底部：0;
方框阴影：0 -1px 1px rgba(100，100，100，2);
}
/风格
TabBarItem.vue封装
模板
！-所有的项目都展示同一个图片，同一个文字-
div class= tab-bar-item @ click= item click
div v-if=！处于活动状态 slot name= item-icon /slot/div
div v-else slot name= item-icon-active /slot/div
div:style= active style slot name= item-text /slot/div
/div
/模板
脚本
导出默认值{
名称： TabBarItem ，
道具：{
路径：字符串，
activeColor: {
类型：字符串，
默认值："红色"
}
},
data() {
返回{
//isActive: true
}
},
计算值：{
isActive() {
///home - item1(/home)=true
///home - item1(/category)=false
///home - item1(/cart)=true
///home - item1(/profile)=true
归还这个. route.path.indexOf(this.path)！==-1
},
activeStyle() {
return this.isActive ? {color: this.activeColor} : {}
}
},
methods: {
itemClick() {
this.$router.replace(this.path)
}
}
}
</script>
<style scoped>
.tab-bar-item {
flex: 1;
text-align: center;
height: 49px;
font-size: 14px;
}
.tab-bar-item img {
width: 24px;
height: 24px;
margin-top: 3px;
vertical-align: middle;
margin-bottom: 2px;
}
</style>
配置路由 index.js
import Vue from vue
import VueRouter from vue-router
const Home = () => import(../views/home/Home)
const Category = () => import(../views/category/Category)
const Cart = () => import(../views/cart/Cart)
const Profile = () => import(../views/profile/Profile)
// 1.安装插件
Vue.use(VueRouter)
// 2.创建路由对象
const routes = [
{
path: ,
redirect: /home
},
{
path: /home,
component: Home
},
{
path: /category,
component: Category
},
{
path: /cart,
component: Cart
},
{
path: /profile,
component: Profile
}
]
const router = new VueRouter({
routes,
mode: history
})
// 3.导出router
export default router
最终效果
到此这篇关于详解VueRouter 路由的文章就介绍到这了,更多相关VueRouter 路由内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。