vue路由使用

1.安装vue路由

npm install vue-router

2.在src中新建router/index.js,引入vue路由

import Vue from 'vue'import VueRouter from 'vue-router'//引入vue-routerVue.use(VueRouter)

3.引入组件，并创建vue路由
*在这里，可以使用@进行引入，@相当于src目录

import Home from "../components/Home";import header from "../components/Header";import List from "@/components/List";//@相当于src目录import footer from "../components/footer";const routes=[    {path:"/",component:Home},//默认页    {path:"/header",component:header},    {path:"/List",component:List},    {path:"/footer",component:footer},]export default new VueRouter({    routes: routes,    mode:"history" //去掉地址栏的#号  })

4.在main.js中引入router/index.js

import router from "@/router/index";new Vue({  el: '#app',  router:router,  components: { App },  template: '<App/>'})

5.路由跳转

<router-link to="/">首页</router-link><router-view></router-view>

方法跳转,在methods中定义一个方法，通过事件执行

routerpush(){            this.$router.push({ path: '/List' })//路由跳转            // this.$router.go(1);//在 history 记录中向前或者后退多少步            // this.$router.replace({ path: '/List' })//路由跳转,但不会向history中添加记录        }

路由传参

1.params传参
路由配置

{path:"/List",name:"分类",components:List},

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

this.$router.push({ name:"分类",params:{id:33} })

子组件中通过this.$route.params.id获取参数
2.query传参
路由配置

{path:"/List",name:"分类",components:List},

父组件中：通过路由属性中的name来确定匹配的路由，通过query来传递参数。

this.$router.push({ name:"分类",query:{id:33} })

子组件中通过this.$route.query.id获取参数

*区别：query是把参数放在地址栏上，刷新不会消失，params不会把参数放在地址上，刷新后消失