Vue路由跳转

路由跳转：

1.router-link（声明式，最简单的方法）

渲染效果相当于<a>标签

//不带参数
//name和path都行，建议用name
<router-link :to="{name='login'}" replace></router-link>
//replace在routre-link标签中添加后，页面切换时不会留下历史记录，替换掉当前的 history 记录
<router-link :to="{path='/login'}" tag="li">login</router-link>
//具有tag属性的会被渲染成相应的标签,渲染效果为<li>login</li>
//以"/"开头从根路由开始，没有就从当前路由开始

//带参数
<router-link :to="{name='login',params:{id:1}}"></router-link>
//不配置path，第一次可请求，刷新页面id会消失
//配置path，id会保留
//取参：this.$route.params.id

 

跳转的路径需要提前在router/index.js下引入

import login from '@/login/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'login',
      component: login
    }
  ]
})

 

 

2.router.push()（编程式）

//字符串
router.push("userid")

//对象
router.push({
path:"/login"
})

//命名的路由
router.push({
name:"login",
params:{userid:"DF21313"}
})

//带查询参数
router.push({
path:"/login",
query:{location:"nj"}
})
//使用params传参只能使用name进行引入，需要提供路由的name或手写完整的带有参数的path
let location="nj"
router.push({name:"login",params:{ location }})  //有效
router.push({path:`/login/${ location }`})          //有效
router.push({path:"/login",params:{ location }}) //params不生效

 

3.this.$router.push()（方法内调用）

//1.不带参数
this.$router.push("login")
this.$router.push({
userid:"12313"
})

//2.query传参
this.$router.push({name:"login",query:{userid:"2131"}})
this.$router.push({path:"/login",query:{userid:"2131"}})
//html 取参 ：$router.query.userid
//script 取参：this.$router.query.userid

//3.params传参
this.$router.push({name:"login",params:{userid:"2131"}})//只能用name
//路由配置时 path:"/login/:userid" 或者 path:"/login:userid"
//不配置path，第一次请求可反应，刷新页面userid会消失
//配置path，刷新页面userid会保留
//html 取参 ：$router.params.userid
//script 取参：this.$router.params.userid

query和params区别：

   query类似于get,传参时显示参数，params类似于post，传参时不显示参数，一般传重要性参数；

   query 传参配置的是path，而params传参配置的是name，在params中配置path无效；

   query在路由配置不需要设置参数，而params必须设置；

   取值方式不同；

   query刷新页面参数还在，params刷新页面参数消失；

 

4.this.$router.replace()（同push用法一致）

与this.$router.push()的区别：

this.$router.push()跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面；

this.$router.replace()跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面

(A----->B----->C   结果B被C替换    A----->C)

 

5.this.$router.go(n)()

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