vue3.0 CLI-3.2路由的基本使用教程

我的github地址-vue 3.0 study-将为所有阶段学习成果建立分支。

==========================

动态路由

将[:]添加到路线的某个部分会成为动态路线。例如/user/:id/，则路线导航不是/user/id/而是/user/666/。

显然，这个id可以在组件中获得和使用。挺过去。$route.params这是当前组件，$route是路由对象，params是对象文字{id:666}。

$route是通过Vue.use(Router)和newvue ({router，store，render:h=h (app)})注入的。$ mount(“# app”)全局依赖项，可用于所有组件。

1.router.js中路径： '/about '的路由更改为路径： '/about/:id '。

2.在“关于”中的顶部导航中添加红色部分

3.添加isactive :函数(){返回此。$ route.params.id==' 666 '到About.vue中的数据或计算属性；}

4.路由器链接到App.vue中的='/about/666 ' vue/路由器链接

5.Style lang=' less '。活动{背景：红色；}/样式

保存并单击[VUE]导航按钮查看效果：

如何在$route中获取参数的值是一个很大的进步。这个参数可以在任何地方使用，并且可以用来做任何事情。

例如，传输数据、根据路由参数从服务器动态获取组件内容等等

在进行下一个内容学习之前，做出承诺。

嵌套路由(子路由)

在一个页面上，通常有多级导航。vue官网就是多级导航的一个例子：顶部是一级导航栏，左侧是二级导航栏。

导航通常对应于路由器链接，路由器链接对应于路由器视图/。

路由器视图/不仅可以存在于App.vue中，还可以存在于任何组件中。

下面将HelloWorld.vue更改为About.vue的子路由：

1.hello world msg=' vue官方相关信息链接'/替换为router-view/

2.router.js中关于. vue组件的路由被替换为

{ path: '/about/:id '，name: 'about '，//路由级代码拆分//这将生成一个单独的区块(about。[哈希]。js ),它在访问路由时是延迟加载的。component :()=import(/* WebPACKchunk name : ' about ' */'。/view/about . vue ')，Children: [{path:' 1 '，component: hello world，prop :(router)=({ Msg : router . query . Msg })}]在浏览器地址栏中输入http://localhost 33608081/#/about/666/1 Msg='欢迎来到nDos blog '查看效果。

编程导航和路由命名

在vue初始化工程中，当配置路由时，组件已经被命名。这就是路由命名。

编程导航，尽量使用命名路线，如下所示：

Router.push ({name:' about '，params: { userid3360 123 } })参数无效，因为它使用path属性进行编程导航。

这样使用了路由跳转，使得单页编程的路由跳转更加灵活。例如，跳转按钮可以绑定到条件跳转的函数。

关于这两个的内容不多，参考官网的教程。

命名视图

在一个组件中，如果有多个组件出口，例如，当许多组件需要同时显示在某个页面上时。

只有一个路由器视图/显然不能满足需求。

当多个路由器视图/同时存在时，必须区分它们，并使用名称属性：路由器视图名称='a'/

在router.js中的components属性中，只需添加多个组件(直到现在，我才明白为什么组件是用复数写的)。

摘要

以上是边肖介绍的vue3.0 CLI-3.2路由的基础教程。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！