vue路由

jiezi

6 年前

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 不会把参数放在地址上，刷新后消失

vue路由

vue 路由使用

路由传参