vue路由实现页面跳转

1、安装下载路由（不是全局安装）

 npm i -S vue-router@3.5.2

 npm i -S vue-router@3  //最新版本

2、查看下载成功 package.json

  "dependencies": {
     "core-js": "^3.8.3",
     "vue": "^2.6.14",
     "vue-router": "^3.5.2"
   }

3、创建公共组件和路由组件

公共组件

components: header.vue,sidebar.vue

路由组件

在src文件夹下，创建一个新的文件夹，一般命名为pages/views；将路由组件（about.vue和home.vue）放进取。

实现路由跳转

4、创建路由器index.js

在src文件夹下创建一个index.js文件

①导入路由插件 vue-router

②导入路由组件

③创建并导出路由器

 //index.js
 ​
 //导入路由插件
 import VueRouter from 'vue-router';
 ​
 //导入路由组件
 import about from "../pages/about.vue"
 import home from "../pages/home.vue"
 ​
 // 导入嵌套路由
 import news from "../pages/home/news.vue"
 import message from "../pages/home/message.vue"
 ​
 // 创建并导出路由器
 const router = new VueRouter({
     routes:[
         {
             path:"/about",
             component:about
         },
         {
             path:"/home",
             component:home,
             //二级路由
             children:[
                 {
                     path:"news",
                     component:news
                 },
                 {
                     path:"message",
                     component:message
                 }
             ]
         },
     ]
 })
 export default router

5、注册路由器到vue系统

①引入VueRouter和router路由器

②应用插件

③将路由器注入Vue系统

 //main.js
 ​
 import Vue from 'vue'
 import App from './App.vue'
 ​
 // 引入VueRouter和router路由器
 import VueRouter from 'vue-router'
 import router  from './router/index'
 ​
 // 应用插件
 Vue.use(VueRouter)
 Vue.config.productionTip = false
 ​
 new Vue({
   render: h => h(App),
   router
 }).$mount('#app')

6、router-link组件和router-view组件都是vue提供的全局组件

①router-link组件作用：进行路由跳转 to属性设置路由的url

 <router-link to="/about">about</router-link>

②router-view组件作用：用于给路由组件占位的，当url匹配之后，对应的路由组件会被渲染在router-view的位置(想要在那里显示，在哪里写)

 <router-view></router-view>

多级嵌套路由

1、准备好嵌套的路由组件

2、在路由器（index.js）种配置路由规则

使用children配置项，子级路由路径前不加/

路由传参

1、query传参

①传递：路由参数，在url？后边以键值对的形式传参

 <router-link to="/home/news?username=chen&&pwd=123">news路由</router-link>

②接收组件

 <p>用户名:{{$route.query.username}}</p>
 <p>密码:{{$route.query.pwd}}</p>

2、params传参

在路由配置的时候传参

 <router-link :to="{
                     name:'newsdetail',
                     params: {
                         id: item.id,
                         news: item.news
                     }
                 }">
                     {{ item.news }}
 </router-link>