Vue-router为什么二级路由无法跳转到一级路由？

我的根路径重定向到/user/cart这个二级路由，当我点击订单的时候，为什么不跳转到/order，而是跳转到/home/order这个没有定义的路径上了？

是不是很神奇？

解決方法1： path跳转 前面加斜杠表示从一级路由也就是根路由开始，不带斜杠表示从当前路由

                       通过name进行跳转  这里建议大家通过name跳转

1. 不带参数， 

<router-link :to="{name:'Home'}">

<router-link :to="{path:'/home'}"> //name,path都行, 建议用name

// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。

 <ul>
        <li
          @click="$router.push('/home')"
          :class="$route.path === '/home' ? 'active' : ''"
        >
          首页
        </li>
        <li
            //通过name 进行跳转
          @click="$router.push({name:'Goods'})"
          :class="$route.path === '/goods' ? 'active' : ''"
        >
          全部商品
        </li>
        <li
          @click="$router.push('/user')"
          :class="$route.path === '/user' ? 'active' : ''"
        >
          个人中心
        </li>
        <li
          @click="$router.push('/order')"
          :class="$route.path === '/order' ? 'active' : ''"
        >
          我的订单
        </li>
        <li
          @click="$router.push('/free')"
          :class="$route.path === '/free' ? 'active' : ''"
        >
          专属福利
        </li>
      </ul>

2.带参数

<router-link :to="{name:'home', params: {id:1}}">

params传参数 (类似post)

 路由配置 path: "/home/:id" 或者 path: "/home:id"

不配置path ,第一次可请求,刷新页面id会消失

 配置path,刷新页面id会保留

html 取参 $route.params.id

script 取参 this.$route.params.id

<router-link :to="{name:'home', query: {id:1}}">

query传参数 (类似get,url后面会显示参数)

路由可不配置

 html 取参 $route.query.id

script 取参 this.$route.query.id

作者：危笑演绎
链接：https://www.zhihu.com/question/447135648/answer/2261045401
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 

二、 this.$router.push() (函数里面调用)

1. 不带参数

this.$router.push('/home')

this.$router.push({name:'home'})

this.$router.push({path:'/home'})

2. query传参

this.$router.push({name:'home',query: {id:'1'}})

this.$router.push({path:'/home',query: {id:'1'}})

// html 取参 $route.query.id

// script 取参 this.$route.query.id

3. params传参

this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,

// 不配置path ,第一次可请求,刷新页面id会消失

// 配置path,刷新页面id会保留

// html 取参 $route.params.id

// script 取参 this.$route.params.id

区别 ：query和params

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,

密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

三、this.$router.replace() (用法同上,push)

四、this.$router.go(n) ()

向前或者向后跳转n个页面，n可为正整数或负整数

this.$router.go(0) // 当前页  也可以用于页面的刷新

this.$router.go(-1) // 上一页

this.$router.go(1) // 下一页

区别：

this.$router.push //跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace //跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

(就是直接替换了当前页面)

this.$router.go(n) //向前或者向后跳转n个页面，n可为正整数或负整数