vue2学习笔记——router

一、router安装

使用npm： npm install vue-router@3.4.7

二、使用步骤

1.新建页面

在pages或者views文件夹下新建两个demo1和demo2文件。代码如下：

demo-1.vue文件：
 
<template>
    <div class="demo1">
        <h1>demo1</h1>
    </div>
</template>
 
 
demo-2.vue文件： 
 
<template>
    <div class="demo2">
        <h1>demo2</h1>
    </div>
</template>

2.引入使用router 
1. 在src文件夹下新建router 文件夹，在router文件夹下新建index.js文件。代码如下：

route：一条路由；

routes 是一组路由,把每一条路由组合起来形成一个数组；

router 是VueRouter的实例，router是一个全局的路由对象；

import VueRouter from 'vue-router'
import Vue from 'vue' 
import Demo1 from '../pages/demo-1.vue'
import Demo2 from '../pages/demo-2.vue'
Vue.use(VueRouter)
 
export default new VueRouter({
    routes: [
        {
            path: '/demo1',
            component: Demo1,
        },
        {
            path: '/demo2',
            component: Demo2,
        },
    ]
})

2.  在main.js文件里引入，挂载到Vue实例中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3.动态渲染 

在App.vue文件中动态渲染出不同的组件。（使用<router-view>标签）

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

Vue2中两种路由跳转方式

1、标签式

首先是 标签式 路由跳转，借用 router-link 的 to 属性进行跳转。

<el-aside width="200px">
    <router-link to="/c1/p1">P1</router-link>
    <router-link to="/c1/p2">P2</router-link>
    <router-link to="/c1/p3">P3</router-link>
</el-aside>

2、编程式

然后是 编程式 路由跳转，就是写一个方法传递url参数，使其路由跳转。

<el-header>
    <el-button type="primary" icon="el-icon-edit" 
               circle size="mini" @click="jump('/c1/p1')"></el-button>
    <el-button type="success" icon="el-icon-check" 
               circle size="mini" @click="jump('/c1/p2')"></el-button>
    <el-button type="warning" icon="el-icon-star-off" 
               circle size="mini" @click="jump('/c1/p3')"></el-button>
</el-header>

编写一个 jump 方法。

<script>
const options = {
    methods : {
        jump(url) {
            this.$router.push(url);
        }
    }
}
export default options;
</script>

这里最重要的就是

 this.$router.push({

path:'路径',

name:'路由的name名'

);

路由传值

1、斜杠传值
this.$router.push({
name:'路由的组件名',
params:{属性名：属性值}
}）

2、问号传值
this.$router.push({
name:'路由的组件名',
query:{属性名：属性值}
}）


注：
使用path进行传值，只能配合query使用。
this.$router.push({
path:'路径',
query:{属性名：属性值}
}）