当前位置：网站首页 > 创业 > 正文

vue-route使用

张子豪 2025-10-12 12:04 1

vue-router中的路由也是基于上面的内容来实现的

在vue中实现路由仍是相对简单的。因为页面中所有内容都是组件化的，只要把路径和组件对应起来就可以了，然后在页面中把组件衬着出来。

1，页面实现（html模版中）

在vue-router中, 也可以看到它界说了两个标签<router-link> 和<router-view>。 <router-link> 就是界说页面中点击的部门，<router-view> 就是点击后，显示内容的部门。所以 <router-link> 还有一个很是主要的属性 to，它界说点击之后，要到哪个路径下，如：<router-link to="/home">Home</router-link>

2， js 中设置装备摆设路由

起首要界说route, 一条路由的实现。它是一个对象，最根基的一条路由由两个部门构成： path: component. path 指路径，component 指的是组件。如：{path:'/home', component: home}

东西/原料

JavaScript

方式/步调

1
这里有两条路由，构成一个routes:
2
最后建立router 对路由进行办理，它是由机关函数 new vueRouter() 建立，接管routes 参数。
3
设置装备摆设完当作后，把router 实例注入到 vue 根实例中,就可以利用路由。
4
执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性，它的 to 属性和 js 中设置装备摆设的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件，最后把组件衬着到 <router-view> 标签。所有的这些实现才是基于hash 实现的。
vue-cli 建立一个项目体验一下, 当然不要健忘安装vue-router
1, 在src 目次下新建两个组件，home.vue 和 about.vue
5
2, 在 App.vue中界说<router-link > 和 </router-view>
6
3, 在 src目次下再新建一个router.js 界说router, 就是界说路径到组件的映射。
7
4，把路由注入到根实例中，启动路由。这里其实还有一种方式，就像store 注入到根实例中，可以在main.js中引入路由，注入到根实例中。
8
5，这时点击页面上的home 和about 可以看到组件往返切换。当初次进入页面的时辰，页面中并没有显示任何组件。想让页面一加载进来就显示home页面，这需要重定标的目的，所谓重定标的目的，其实就是从头给它指心猿意马一个偏向，好比当用户点击home 的时辰，我们让它指标的目的about.
这用到了redirect 设置装备摆设。刚进入页面的时辰，它的路径是 '/', 所以从头界说到home
9
6，打开浏览器的节制台，可以看到路由时组件的切换。
起首看到 router-link 标签衬着当作了 a 标签，to 属性酿成了a 标签的 href 属性，这时就大白了点击跳转的意思。router-view 标签衬着当作了界说的组件。可以对比一下app.vue 中的标签和节制台中的标签
10
动态路由
分歧的用户（就是用户的id分歧），它城市导航到统一个user 组件中。在设置装备摆设路由的时辰，就不克不及写死, 就是路由中的path属性，不克不及写死。如 path： “/home”,只有是home的时辰，才能显示home 组件，执行的是严酷匹配。导航到 user 组件，路径中必定有user,
id 分歧，那就给路径一个动态部门来匹配分歧的id. 动态部门以 : 开首，那么路径就酿成了 /user/:id, 这条路由就可以这么写： { path:"/user/:id", component: user }.
再界说一个user组件，页面中添加两个router-link 用于导航， router.js中添加路由设置装备摆设。user组件随便写一个就好了。
app.vue 更改如下：
11
在动态路由中，想知道路由是从哪里过来的，就是获取到动态部门怎么办。当整个vue-router 注入到根实例后，在组件的内部，可以经由过程this.$route.params 来获得这个动态部门的。它是一个对象，属性名，就是路径中界说的动态部门 id, 属性值就是router-link中to 属性中的动态部门，如123。在组件中，若是想要获取到state 中的状况，我们可以用computed 属性，在这里也是一样，在组件中，界说一个computed 属性dynamicSegment， user 组件点窜如下：