vue路由页面跳转（vue2路由跳转页面）

前端工作笔记之---页面路由跳转vue2

前言

1.安装vue-router

npm i vue-router

2.配置路由

在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"); },