vue的router（一）路由的简介&路由的基本使用&几个注意点&嵌套路由&路由的query参数&命名路由&路由的params参数&路由的props配置

1.路由的简介

*什么是路由：一个路由就是一组映射关系（key-value），key为路径，value可能是function或component

*vue-router：vue的一个插件库，专门用来实现spa应用（单页面web应用）

*路由分类：

   前端路由：value是component，用于展示页面内容，当浏览器的路径改变时，对应的组件就会显示

   后端路由：value是function，用于处理客户端提交的请求，服务器收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回相应数据

2.路由基本使用

*安装：npm i vue-router<注意vue的版本和vue-router的版本>

*引入：在main.js文件夹里引入：

import VueRouter from 'vue-router'

 使用：Vue.use(VueRouter)

*在src目录下新建router文件夹，在该文件夹下创建index.js，该文件专门用于创建整个应用的路由器，在该文件下同样引入：import VueRouter from 'vue-router'

//该文件专门用于创建整个应用的路由器

//引入vue-router
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
//创建一个路由
export default new VueRouter({
    routes:[
        //配置第一个路由
        {
            //如果你的路径是about
            path:'/about',
            //就展示About组件
            component:About
        },
        //配置第二个路由
        {
            //如果你的路径是home
            path:'/home',
            //就展示Home组件
            component:Home,
        }
    ]
})

*在main.js里引入路由器：

   import router from './router/index'

 路由器的配置项：

import Vue from 'vue'
import App from './App.vue'
//引入vue-router
import VueRouter from 'vue-router'
//引入路由器
import router from './router/index'
Vue.config.productionTip = false
//应用vue-router插件
Vue.use(VueRouter)

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

*路由标签和指定组件呈现的位置：

3.几个注意点

*路由组件->pages

*一般组件->components

*路由的跳转会进行频繁的挂载和销毁

*每个组件都有自己的$router属性,里面存储着自己的路由信息

*整个应用只有一个router，可以通过组件的$router属性获取

4.嵌套路由

*使用children配置项

//该文件专门用于创建整个应用的路由器

//引入vue-router
import VueRouter from "vue-router";
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
//创建一个路由
export default new VueRouter({
    routes:[
        //配置第一个路由
        {
            //如果你的路径是about
            path:'/about',
            //就展示About组件
            component:About
        },
        //配置第二个路由
        {
            //如果你的路径是home
            path:'/home',
            //就展示Home组件
            component:Home,
            //配置home的子路由
            children:[
                {
                    path:'message',
                    component:Message,
                    children:[
                        {
                            path:'detail',
                            component:Detail,
                        }
                    ]
                },
                {
                    path:'news',
                    component:News
                }
            ]
        }
    ]
})

 *跳转要写完整路径

5.路由的query参数

*传递参数：

 *接收参数：

6.命名路由

*作用：简化路由的跳转

*给路由命名：

 *使用路由的name：

 

 7.路由的params参数

*配置路由，声明接收params参数：

 *传递参数：

 *接收参数：

 8.路由的props配置

*props的布尔值写法，值适用于传递params参数：

 

 *props的函数写法：