Vue Router

简介

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由 Vue.js 的过渡系统提供的过渡效果
细致的导航控制
自动激活 CSS 类的链接
HTML5 history 模式或 hash 模式
可定制的滚动行为
URL 的正确编码

路由建立连接

router-link

使用Vue Router时，我们需要做的就是将我们的组件映射到路由上

		<router-link class="links ihome" to="/">首页</router-link>
		<router-link class="links icate" to="/category">分类</router-link>
		<router-link class="links iball" to="/ball">米圈</router-link>
		<router-link class="links icart" to="/cart">购物车</router-link>
		<router-link class="links iuser" to="/user">我的</router-link>

点击首页可以跳转到"/"根目录
点击分类可以跳转到分类所在目录:category
点击米圈可以跳转到米圈所在目录:ball
点击购物车可以跳转到购物车所在目录:cart
点击我的可以跳转到我的所在目录:user

新建页面 router-view

路由配置 router/index.js

            {
                path:"/about",
                name:"About",
                component:About
            }

在router/index.js文件中进行配置

路由传参注意事项

使用路由要注意这几个方面:

vue新建页面.png

创建页面的名字要和import的from路径保持一致
import后面要和component名称保持一致
router-link的路径要和定义的path保持一致

路由跳转

在to的后面添加以下内容:

back()和go(-1):后退
forward()和go(1):前进
push():跳转
replace():替换

影响路由参数的变化

要对同一个组件中参数的变化做出响应的话，你可以简单地watch对象上的任意属性,如:

        const User = {
          template: '...',
          created() {
          this.$watch(
              () => this.$route.params,
              (toParams, previousParams) => {
                  }
              )
          },
       }

使用beforeRouteUpdate可以取消导航：

        const User = {
           template: '...',
           async beforeRouteUpdate(to, from) {
            this.userData = await fetchUser(to.params.id)
           },
        }

可选参数

通过":"可以进行参数二选一

        const routes = [
            {path: '/users/:userId?' },
            {path: '/users/:userId(\d+)?'}
        ]

vue3路由的神奇使用