vue路由运用

1.装置vue路由

npm install vue-router

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

import Vue from 'vue'
import VueRouter from 'vue-router'//引入vue-router
Vue.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不会把参数放在地点上，革新后消逝