vue-router路由基础实例分享

vue-router 路由基础的详解

今天我总结了一下vue-route基础，vue官方推荐的路由。

一、起步

HTML

创建模板（组件）：

(也可以用import 引入外部组件)

组件注入路由：

创建路由实例：

注意这里 routes 没有 ‘ r ' (不要写成 routers)

创建vue实例（并挂载实例）

二、动态路由匹配

有时候我们需要的是模板结构一样，当时数据不一样，就相当于我们要把不同ID的登录用户连接到同一个页面，但要显示每个用户的独立信息，这时我们就用到了动态路由匹配。

动态路由主要用到了全局 $route.params 和路由的动态参数，全局route 的 params API 存储着 路由的所有参数，路径的参数用 “ ： ”来标记：

HTML

JS

三、嵌套路由

1.嵌套路由讲的是我们可以在 <router-view>中去在渲染 <router-view> 这时要在配置路由时使用 children

例如：

HTML：

JS：

四、命名路由

1.给路由命名指定路路由跳转，要用到参数name 和 v-bind

HTML:

JS:

五、命名视图

1.给渲染视图 router-view 命名，来制定让那个视图渲染组件

HTML:

JS：

六、重定向 和 别名

重定向 和别名，首先我先来解释一下什么叫做重定向和别名

『重定向』的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，

『别名』 /a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
重定向主要用参数：redirect 而别名主要用到参数： alias

HTML:

JS:

相关推荐：

vue-router实现tab标签页

基于Vue、Vuex、Vue-router实现动画切换功能

三种Vue-Router来实现组件间跳转

以上就是vue-router路由基础实例分享的详细内容，更多请关注Gxl网其它相关文章！