Vue-路由实现页面跳转的两种方式（router-link和JS）

Vue.js 路由可以通过不同的 URL 访问不同的内容，实现多视图的单页 Web 应用

通过<router-link>实现

用于设置一个导航链接，切换不同 HTML 内容

使用 v-bind 的写法传递

<router-link :to="{ path:'/news/edit', query:{ cardName : '编辑新闻', type : 2 }}">
  <el-button type="primary" icon="el-icon-edit" size="small">
    编辑新闻
  </el-button>
</router-link>

• path： 代表路由地址
• query： 代表URL后面拼接的参数键值对

页面接收传递参数的结果

// 通过此操作可以获得上面传递过来的参数对象
let query = this.$route.query

// 取值
let cardName = query.cardName
// 前提query对象不为空 否则页面渲染会异常
let cardName = this.$route.query.cardName

通过JavaScript 实现

当前窗口切换

template 部分：

<button @click="toURL">跳转页面</button>

script 部分：（注意这里是 router，上面是 route）

简单写法

methods:{
  toURL(){
    this.$router.push({ path: 'news' })
  }
}

传参的写法

methods:{
  toURL(){
    this.$router.push({ name: 'news', params: { newsId: 123 }})
  }
}

传入地址键值对（与上一种页面上方式一致，拼接在URL后）

methods:{
  toURL(){
    this.$router.push({ name: 'news', params: { newsId: 123 }, query: { type: 'sports' } })
  }
}

新窗口打开

具体实现

// 定义需要传递的路径 以及 URL参数 采用新窗口打开
let routeData = this.$router.resolve({
  path: '/news/edit',
  query: {newsId: newsId, gameId: gameId,}
})
window.open(routeData.href, '_blank')