vue2学习笔记——router

一、router安装

使用npm： npm install [email protected]

二、使用步骤

1.新建页面

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

demo-1.vue文件：
 

 
 
demo-2.vue文件： 
 

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文件中动态渲染出不同的组件。（使用标签）

Vue2中两种路由跳转方式

1、标签式

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

    P1
    P2
    P3

2、编程式

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

编写一个 jump 方法。

这里最重要的就是

 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:{属性名：属性值}
}）