前端工作笔记之---页面路由跳转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");

    },