位置: IT常识 - 正文
vue2路由跳转页面(vue2路由跳转页面不刷新问题)
编辑：rootadminvue2路由跳转页面 
本文链接地址:https://www.jiuchutong.com/zhishi/296025.html
转载请保留说明！
推荐整理分享vue2路由跳转页面(vue2路由跳转页面不刷新问题)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue2路由跳转页面刷新,路由没有变化,vue2路由跳转页面刷新,路由没有变化,vue路由跳转的三种方法,vue的路由跳转了,可是页面还在当前页,vue2路由跳转页面不显示,vue2路由跳转页面不显示,vue2路由跳转页面,vue2路由跳转页面不刷新问题,内容如对您有帮助，希望把文章链接给更多的朋友！
前端工作笔记之---页面路由跳转vue2
前言
1.安装vue-router
npm i vue-router2.配置路由
在src文件夹下创建router文件夹，然后在router文件夹下创建index.js文件，如下图
在index.js文件夹中进行配置
import Vue from 'vue'import VueRouter from 'vue-router'// 导入一级路由import Goods from '@/views/Goods'import Particulars from '@/views/Particulars'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/goods' }, { path: '/goods', name: 'goods', component: Goods, }, { path: '/particulars', name: 'particulars', component: Particulars }]const router = new VueRouter({ routes})export default router在src文件夹下创建view文件夹，在里边放路由文件，如下图
在main.js文件中注册路由
import router from '@/router/index.js'new Vue({ render: h => h(App), router}).$mount('#app')接下来就是使用啦
一、单页面路由跳转
首先强调一点，使用路由跳转需要放置路由挂载点<router-view></router-view>,放置在你需要显示的地方。
这里我将挂载点放置在App.vue中了
<template> <div id="app"><router-view></router-view> </div></template>1.使用<router-link></router-link>的方式进行跳转
<router-link :to="{ path: '/particulars'}">跳转</router-link>2.使用this.$router.push()的方式进行跳转
<el-button type="text" size="small" @click="toEdit()">编辑</el-button>methods: { toEdit() { this.$router.push({ path: '/particulars' }) }, },this.$router.replace()，用法同上。
二、跳转到新页面（打开一个新窗口）
1.<router-link></router-link>
<router-link target="_blank" :to="{ path: '/catalog', query: { id: '1' } }" >打开新的标签页</router-link>2.this.$router.push()
const routeUrl = this.$router.resolve({ path: "/targetUrl", query: { id: 96 }, }); window.open(routeUrl.href, "_blank"); },上一篇：web自动化测试进阶篇02 ——— BDD与TDD的研究实践(web自动化测试方法)
下一篇：html/javascript实现简单的上传(html+javascript)
