router详解

1、在使用element导航栏，需要使用路由跳转时添加 :router="true" 属性

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" :router="true" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
            <el-menu-item index="/index/hotel">
                <i class="el-icon-setting"></i>
                <span slot="title">酒店</span>  
            </el-menu-item>
</el-menu>

2、默认打开子级组件 redirect:'/xxxx'

{
    path:'/',
    component:index,
    redirect:'/hotel',
    children:[
         {
             path: 'hotel',
             name: 'hotel',
             component:hotel,
         }
               
       ]

},

3、路由跳转

<router-link replace class="list-group-item" active-class="active" to="/home/message">Message</router-link>

• 作用：控制路由跳转时操作浏览器历史记录的模式
• 浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式
• 开启replace模式：<router-link replace ...>News</router-link>

4、router跳转的三种方式

第一种：vue-router

  不带参数写法：

  name,path都行, 建议用name  

<router-link :to="{name:'router跳转的路径名称/别名'}"> 

<router-link :to="{path:'router跳转的目标组件的路径'}"> 

  带参数写法：

  带参数的param传参写法

//name写法
<router-link :to="{name:'router跳转的路径名称/别名', params:{需要传递的参数的对象格式}}">  

//跳转路由并携带query参数，to的字符串写法
<router-link :to="`跳转的路径?id=${id参数}&title=${标签参数}`"

  路由配置：

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

path: "/home/:id" 或者 path: "/home:id"

   html 取参

$route.params.id

   script 取参

this.$route.params.id

   带参数的query传参写法

<router-link :to="{name:'router跳转的路径名称/别名', query: {对象形式的参数}}">

   query传参数 (类似get,url后面会显示参数)   路由可不配置

   html 取参

$route.query.id

   script 取参

this.$route.query.id

第二种：this.$router.push() (函数里面调用)

  不带参数写法：

//简介写法
this.$router.push('router跳转的路径')

//name写法
this.$router.push({name:'router跳转的路径名称/别名'})

//path写法
this.$router.push({path:'router跳转的路径'})

  带参数写法：

  带参数的query传参写法：

this.$router.push({name:'router跳转的路径名称/别名',query: {id:'1'}})
this.$router.push({path:'router跳转的路径',query: {id:'1'}})

  html 取参

$route.query.id

  script 取参

this.$route.query.id

  带参数params传参写法：

//name写法
<router-link :to="{name:'router跳转的路径名称/别名', params:{需要传递的参数的对象格式}}">  

//跳转路由并携带query参数，to的字符串写法
<router-link :to="`跳转的路径?id=${id参数}&title=${标签参数}`"

  路由配置：

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

path: "/home/:id" 或者 path: "/home:id"

   html 取参

$route.params.id

   script 取参

this.$route.params.id

  直接通过path传参写法

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

  获取参数：

this.$route.params.id

传递对象(obj不能过长否则会报错)

query传递对象 (类似get,url后面会显示参数) JSON.stringify(obj) 转一下.

  接收参数：

JS:JSON.parse(decodeURIComponent(this.$route.query.obj)) 

HTML:JSON.parse(decodeURIComponent($route.query.obj))

总结：

query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在。
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id会消失

第三种：this.$router.replace() (用法同上,push)

第四种：this.$router.go(n)

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

路由三种跳转方式的总结：

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

• 2、this.$router.replace
  跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

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