一、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:{属性名:属性值}
})