html5 css3 vue.js 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')

接下来就是使用啦

一、单页面路由跳转

首先强调一点，使用路由跳转需要放置路由挂载点,放置在你需要显示的地方。

这里我将挂载点放置在App.vue中了

1.使用的方式进行跳转

跳转

2.使用this.$router.push()的方式进行跳转

编辑

methods: {

toEdit() {

this.$router.push({ path: '/particulars' })

},

},

this.$router.replace()，用法同上。

二、跳转到新页面（打开一个新窗口）

1.

>打开新的标签页

2.this.$router.push()

const routeUrl = this.$router.resolve({

path: "/targetUrl",

query: { id: 96 },

});

window.open(routeUrl.href, "_blank");

},

参考文章

 您阅读本篇文章共花了：