vue-router在项目中的使用

在开发中，路由器是前端实现单页应用最为重要的。

安装vue-router

npm install vue-router@3,注意vue2的项目要使用3版本的，到了vue3项目中才使用4版本的。

新建router文件夹

新建index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from '@/pages/Home'
import About from '@/pages/About'
import News from '@/pages/News'
import Message from '@/pages/Message'

const router = new VueRouter({
  routes:[
    {
      path:'/home',
      component:Home
    },
    {
      path:'/about',
      component:About,
      children:[
        {
          path:'news',
          component:News
        },
        {
          path:'message',
          component:Message
        }
      ]
    }
  ]
})

export default router

然后在main.js引入路由模块

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router' //新增

Vue.config.productionTip = false

new Vue({
  store,
  router, //新增
  render: h => h(App),
}).$mount('#app')

然后在pages新增页面组件：

Home.vue

<template>
  <div>Home</div>
</template>

<script>
  export default{
    name:'Home'
  }
</script>

<style>

</style>

About.vue

<template>
  <div>
    About组件
    <router-link to='/about/news'>新闻</router-link>
    <router-link to='/about/message'>消息</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
  export default{
    name:'About'
  }
</script>

<style>

</style>

News.vue

<template>
  <div>News</div>
</template>

<script>
  export default{
    name:'News'
  }
</script>

<style>

</style>

Message.vue

<template>
  <div>Message</div>
</template>

<script>
  export default{
    name:'Message'
  }
</script>

<style>

</style>

在app.vue

<router-link to='/home'>Home</router-link> <br/>

<router-link to='/about'>About</router-link>

<router-view></router-view>

1、query传参方式：

to='/new?id=1&title=标题'

:to="{

        path:'/news',

        query:{

                id:1,

                title:'标题'

        }

}"

获取query参数的方式 ：

this.$route.query

2、params传参方式

需要在路由规则里设置传参占位符

        {
          path:'news/:id/:title',
          component:News
        }

<router-link to='/home/1/标题'>Home</router-link>

:to="{

        name:'News',//params传参这里不能使用path

        params:{

                id:1,

                title:'标题'

        }

}"

获取params参数方法：

this.$route.params