vue3.0路由配置,vuecli3配置
Vue-router是Vue的官方路由插件。本文将结合实例代码介绍Vue-cli4的路由配置，有一定的参考价值，感兴趣的朋友可以参考一下。
目录
前言-vue路由一、最基本的路由配置1。配置router/index.js2配置App.vue II。路由延迟加载技术。路由嵌套IV。动态路由1。动态路由配置2。动态路由参数总结
前言-vue路由
Vue-router是Vue的官方路由插件，与Vue.js深度集成
在使用vue-router的单页面应用中，url的变化会引起组件的切换，从而达到页面切换的效果。所以，如何让URL按照我们的意愿改变，以及URL改变后页面会去哪里，是配置vue-router的两大问题。
[SPA网页]前端渲染实现单页富应用SPA页面。整个网页只有一个HTML页面，静态资源服务器中只有一组HTML CSS甚至只有一组JS。
[富应用]可以依靠发送到服务器的新请求URL来实现。从服务器获取资源后，前端路由会负责将资源分配给页面的相应组件；
[单页面]的实现需要在前端更改url。前端路由出现后，前端路由会根据路由器的监听，从映射关系中找到需要改变的部分，提取并分配新的资源，只重新渲染需要改变的部分；
一、最基本路由配置
你得先装vue-router，我就不说怎么装了…
我们成功安装vue-router后，项目文件的src中会出现一个 router 文件夹，这个文件夹中会有一个index.js，路由器的配置主要在这里完成。
打开它，然后在routes数组中配置它。页面的路由作为一个对象收集在这个数组中，其内部包含路径、组件等属性，会对URL如何变化做出响应；
1.配置router/index.js
//这个在router/index.js里，都是；
从“vue-router”导入{ createRouter，createWebHistory }
从以下位置导入主页./views/Home.vue
常量路由=[
//在这里配置路由；
]
//在router4中使用createRouter代替new VueRouter
const router=createRouter({
history:createWebHistory(process . env . base _ URL)，
路线
//在这里介绍所有页面的路由配置数组路由；
})
导出默认路由器
//导出包含所有路由配置的路由器对象，
//注入main.js供全局使用；
组件属性：值是一个页面，这个页面控件需要提前引入。
Path属性：指定当某个内容出现在URL中时，跳转到与component属性对应的页面。
//这个在router/index.js里，最后省略；
从“vue-router”导入{ createRouter，createWebHistory }
从以下位置导入主页./views/Home.vue
关于从导入./views/About.vue
从导入新闻./views/News.vue
//引入3个页面控件；
常量路由=[
{
path:“/”，/*指定对应于初始URL的页面*/
姓名：家，
Component: Home /*指定默认情况下它位于主页上*/
},
{
path:“/about”，/*指定当新段为/about */时，URL将跳转
名称：“关于”，
组件：About /*跳转到About */
},
{
path:“/news”，/*指定当新段为/news */时，URL将跳转
名称：“新闻”，
组件：新闻/*跳转到新闻*/
},
]
2.配置App.vue
我们已经规定了当url变成不同的字符时如何跳转。现在我们要考虑的是如何让URL改变，用我们的方式改变。
因为render只会渲染App.vue，所以你一开始唯一能看到并且唯一能操作的就是App.vue，所以我们只能在这里指定如何更改URL。
知道两个新标签，他们已经全球注册了。
要添加到URL XXX/router-link的Router-link to=字符
//路由器链接将呈现为；
路由器-视图/
//这两个需要结合使用；
App.vue中的所有页面跳转都是由router-link通过改变URL来驱动的。
路由器视图是一个占位符标签，它指定路由器链接标签需要显示的位置。
反正删了就不显示router-link了(没关系，先说路由吧……)。
！-这是在应用程序中
模板
div id=nav
！-to属性指定如何更改URL-
！- Tag属性指定需要将路由器链接标记呈现到哪个HTML元素中；-
Router-link to=/tag= a 主页/router-link
router-link to=/about tag= a about page/router-link
Router-link to=/news tag= a 新闻页面/router-link
路由器-link to=/log in Tag= a log in/router-link
/div
路由器-视图/
/模板
然后你可以npm运行serve运行你的项目看看；
可以看出，根据标签属性，又多了四个A标签。让我们点击新闻来看看。
根据URL router-link的to属性的值，页面跳转正确。
基本路由配置完成。
二、路由懒加载技术
将不同路由对应的组件分开更有效率，只有当某个路由被触发时，才会加载对应的组件。除此之外，排除第三方底层支持公共App，其他Vue页面组件都在服务器上，可以按需使用，保证对页面影响最小。
其实就是改变router/index.js中各个组件的引入方式…
通过箭头函数的方法。
常量路由=[
{
路径：“/about”，
名称：“关于”，
组件：()=导入(./views/about . vue’)
//About在这里直接引入，赋给component
},
{
路径：“/新闻”，
名称：“新闻”，
组件：()=导入(./views/news . vue’)
//About在这里直接引入，赋给component
},
{
路径：“/login”，
名称：登录，
组件：()=导入(./views/log in . vue’)
//About在这里直接引入，赋给component
},
]
三、路由嵌套
我们不能有一个没有链接的子页面，不是吗？用户通过App.vue进入一个子页面，应该会有下属的链接引导到其他页面，这就需要路由嵌套技术。
简单来说就是在父页面的路由中指定子页面的路由，比如News.vue的路由中NewsChild-1.vue的路由.
//这是缩减后的router/index . js；
常量路由=[
{
路径：“/新闻”，
名称：“新闻”，
组件：()=导入(./views/news . vue’)，
儿童：[
{
路径：“NewsChild-1”，
//子路由不必以“/”和上层路径开头，
//但实际上会增加解析；
//指定当URL出现时/News/NewsChild-1，
//跳转到组件对应的页面；
组件：()=导入(./views/NewsChild-1 )，
}
]
},
]
这指定了新闻页面上的URL更改后应该做什么。
自然要指定如何在新闻页面下更改网址，进入News.vue进行操作。
！-这是News.vue-
模板
h1新闻/h1
//规定触发时增加网址/News/News child-1；
路由器链接到=/News/News child-1 News child-1/路由器链接
路由器视图/路由器视图
/模板
然后看一看呈现的页面：
单击链接NewsChild-1:
根据router-link的to属性值，URL变为/News/NewsChild-1。
您可以在children数组中再嵌套几个页面组件，并做同样的事情。
四、动态路由
很多时候页面需要跳转到哪里并不是程序员可以决定的，这就需要程序员根据需求自己决定，这样就可以动态的改变路线。
1.动态路由配置
简单来说，我们先不要把[URL待添加]和[URL待决定由[path]跳转死，用v-bind与export default中的数据进行通信，使URL跟随数据变化。
//这是在router/index.js中
从“vue-router”导入{ createRouter，createWebHashHistory }；
常量路由=[
{
路径：“/”，
姓名：家，
组件：()=导入(./views/home . vue’)，
},
{
//这里也不写死亡之路的值了；
路径：“/user/:userId”，
姓名：用户，
组件：()=导入(./views/User.vue )，
}
];
！-这是在应用程序中
模板
div id=应用程序
路由器链接到=/ Home/路由器链接
router-link to=/about about/router-link
！-在这里使用v-bind调用userId数据；-
！-将/user/作为字符串拼接到userId -
路由器链接v-bind: to=/user/userid 用户/路由器链接
/div
路由器-视图/
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
//将这里的userId的数据设置为baixia
用户Id:白下，
};
},
};
/脚本
我们来看看效果：
接下来点击用户：
URL成功拼接了data中的数据UserId，即白下。
2.动态路由传参
动态路由也是vue传输数据的方式之一，$route用于Vue页面组件(即Vue文件)之间的通信。
我们先了解两个变量：$router:index . js末尾createRouter创建的路由对象$route:当前活动的路由对象，它有一个params属性，全名参数，可以用来获取我们URL中v-bind传递的值。
比如User.vue需要获取App.vue的数据中的userId数据：
！-在App.vue(发送者)中-
模板
div id=应用程序
路由器链接v-bind: to=/user/userid 用户/路由器链接
/div
路由器-视图/
/模板
脚本
导出默认值{
名称：“应用程序”，
data() {
返回{
用户Id:白下，
};
},
};
/脚本
//在user.vue中(接收器)
导出默认值{
姓名：用户，
计算值：{
userId() {
归还这个。$router.params.userId
//设置此的值。$router.param.userId，
//即返回App.vue的router-link中传入的userId，
//作为计算属性userID()的值
}
}
}
User.vue中用于获取用户信息的参数取决于index.js中的路径，如果path:/user/:abc ，User.vue的脚本应如下所示：
导出默认值{
姓名：用户，
计算值：{
userId() {
//这里也要获取abc属性；
归还这个。$router.params.abc
}
}
}
总结
昨天我接到通知，我们的HTML5设计竞赛获得了一等奖…
挺离谱的。我觉得挺满意的。这几天我得赶上Vue的进度。
关于深入了解Vue-cli4路由配置的这篇文章到此为止。有关Vue-cli4路由配置的更多信息，请搜索我们以前的文章或继续浏览以下相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。