vue-router路由的作用,vuerouter默认路由

　　本文主要介绍Vue学习的基础——Vue router路由，路由本质上是一个超链接。夏眠的文章重点介绍了VueRouter路由的相关信息，有需要的朋友可以参考一下。希望对你的学习有帮助。

一、VueRouter

1、说明

　　用Vue.js Vue Router创建一个单页应用感觉很自然：有了Vue.js，我们已经可以通过组合组件来组成应用了。当你想添加Vue路由器时，我们需要做的是将组件映射到路由，然后告诉Vue路由器在哪里渲染它们。路由本质上是一个超链接。

2、选中路由的渲染：

　　（1）、router-link-exact-active类

　　当路由是到where时，类名被添加到相应的路由标签中。

　　比如你点击关于，路线就会跳转到关于对应的页面。

　　（2）、router-link-active类

　　在路由中，子路由的路径设置(例如，http://localhost/home)包括父路由的路径设置(例如，3358localhost/)，因此当您单击子路由并将router-link-active类添加到子路由时，父路由也具有router-link-active类。也就是说，当点击路由(http://localhost/home)时，两个路由都具有被选中的效果。

3、基本工作原理

　　vue的html部分引入Router-link(类似原理A)，to属性是要跳转的vue组件，而router-view负责显示当前路由所指向的内容，这样单个页面也可以达到页面跳转的效果！

二、实战

1、创建一个带router的vue项目

2、打开项目中的src/router/index.js文件

　　可以看到项目自动生成了两条路线，一条是主页，一条是关于界面。路径分别是“/”和“/about”。

　　打开根目录下的main.js，可以看到main.js中已经引入了routing，所以所有组件中都可以使用routing。

3、在浏览器中打开项目

　　可以看到两条路线，回家和关于。

4、新建路由

　　写一个类似淘宝的路线导航，包括：首页、消息、购物车和我的四个部分。

　　新建四个vue文件，对应四个路由。

　　配置路由index.js文件

　　从“vue”导入Vue

　　从“vue路由器”导入vue路由器

　　从以下位置导入主页./views/Home.vue

　　Vue.use(VueRouter)

　　常量路由=[

　　{

　　路径：“/”，

　　姓名：家，

　　组件：主页

　　{

　　路径：“/消息”，

　　名称：“消息”，

　　component:()=import(/* webpackChunkName: about */./views/message . vue’)

　　{

　　路径：“/goodcar”，

　　名称：“好车”，

　　component:()=import(/* webpackChunkName: about */./views/goodcar . vue’)

　　{

　　路径：“/我”，

　　姓名：“我”，

　　component:()=import(/* webpackChunkName: about */./views/me . vue’)

　　}

　　]

　　const router=new VueRouter({

　　路线

　　})

　　导出默认路由器

　　在App.vue中配置导航栏

　　模板

　　div id=应用程序

　　div id=nav

　　路由器链接到=/主页/路由器链接

　　Router-link to=/message 消息/router-link

　　路由器-链接到=/goodcar 购物车/路由器-链接

　　路由器链接到=/me my/路由器链接

　　/div

　　路由器-视图/

　　/div

　　/模板

　　风格

　　#app {

　　字体系列：Avenir，Helvetica，Arial，无衬线；

　　-webkit-font-smoothing:抗锯齿；

　　-moz-osx-font-smoothing:灰度；

　　文本对齐：居中；

　　颜色：# 2c3e50

　　}

　　#nav {

　　填充：30px

　　边距：0自动；

　　宽度：30%；

　　显示器：flex

　　justify-content:space-around；

　　}

　　#导航a {

　　字体粗细：粗体；

　　颜色：# 2c3e50

　　文字-装饰：无；

　　}

　　# nav a . router-link-exact-active {

　　颜色：# 42b983

　　}

　　/风格

　　结果：

　　这样，我们就了解了路由的基本概念、配置和功能。

　　这就是这篇关于Vue学习的文章——Vue router路由基础。有关VueRouter路由基础的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录