Vue-router

Vue路由详解

一、Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

• 文档地址：https://router.vuejs.org/zh/

二、路由配置步骤

（1）安装路由

      npm install vue-router --save

（2）在src目录下新建router文件夹，并创建index.js文件

（3）在src目录下新建views文件夹放置四个组件

• film.vue
• cinema.vue
• pintuan.vue
• my.vue

（4）在router文件夹中的index.js文件中为上面的四个组件配置路由

/**
 * 配置vue-router
 */
 import Vue from 'vue';  //导入Vue
 import VueRouter from 'vue-router';  //导入vue-router

 // 使用插件,用use（使路由在vue中生效）
 Vue.use(VueRouter);

// 路由的数组
const routes = [
    {
        // 访问路径
        path: '/film',  //根路由 和 根路由下的film路由
        // 访问/film,显示以下的组件
        component:()=>import('@/views/film'),
    },
    {
        path: '/cinema',
        component:()=>import('@/views/cinema')
    },
    {
        path: '/pintuan',
        component:()=>import('@/views/pintuan')
    },
    {
        path: '/my',
        component:()=>import('@/views/my')
    }
]
// 创建路由的实例，参数是个对象
const router = new VueRouter({
    routes: routes
});

export default router;  //导出路由

（5）配置main.js文件，导入router文件夹中的index.js

import Vue from 'vue';
import App from './App.vue';
import router from './router/index';  //1、导入router文件夹中的index.js

new Vue({
    router,   // 2、添加router
    render: h=>h(App)
}).$mount('#app');

（6）启动项目，查看路由是否配置成功

    npm serve ./src/main.js

三、router-view 和 router-link

（1）router-view

• （1.1）用于放置子路由，路由匹配的组件渲染在这里
• （1.2）可以根据需要调整位置，有这个标签才能渲染子路由
  （只要有子路由，都要在配置好router/index.js后，在父路由组件下放置这个标签）

（2）router-link

• 类似a标签，最后会转成a标签

   <router-link to='路由地址'>{ 内容 }</router-link>

四、配置根路由 和 404页面

（1）配置根路由

• 因为main.js文件中的render渲染了一次App.vue组件（搭建了一个舞台），其他所有的组件就可以渲染到App.vue上进行展示，当根路由对应的组件又绑定App.vue时，又渲染了一次App.vue（内容重复出现两次），所以根路由不绑定组件，直接设置重定向（redirect）

    {
        //配置根路由
        path: '/',
        //重定向
        redirect: '/film/nowList'
    },

（2）配置404页面

• 在Vue项目中，当访问的页面路由不存在或错误时，页面显示为一片空白。然而，通常我们需要对访问url不存在或者错误的情况下添加默认的404页面，即Not found页面。（路由地址设置为：*）

    {
        // 404页面配置
        path: '*',
        component: ()=>import('@/components/NotFound')
    }

五、路由传参

1、设置动态路由（使用router-link传参）

（我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个detail电影详情组件，对于所有filmId各不相同的电影，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果）

• （1）一个“路径参数”使用冒号 : 标记，那么: detail/ 后面的filmId就会被看成是参数而不是一个路由。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

            {
                path: 'details/:filmId',
                component: () => import('@/views/film/details')
            }

router-link跳转时携带参数（filmId是变量，所以要给to绑定属性，并且使用反引号）

       <router-link :to="`/film/details/${film.filmId}`" ></router-link>

• （2）在detail页面接收取出参数
  • 因为设置的动态路由的参数为filmId，所以参数被储存到$route.params的filmId中

      let filmId = this.$route.params.filmId;

2、通过$router.push传参（编程式导航传参）

• （1）通过$router.push中的 query 属性传参
  • query传参是针对于path

    //列表页面传数据
       this.$router.push({
             path:'/film/detail'
             query: {
                      name: '复仇者联盟4',
                      filmId: 'djaojgfaikoj'；
           }})

    //detail页面接收
     let filmId= this.$route.query.filmId;

• （2）通过$router.push中的 params 属性传参
  • params 传参是针对于name

    //列表页面传数据
       this.$router.push({
             name:'detail'
             params: {
                      name: '复仇者联盟4',
                      filmId: 'djaojgfaikoj'；
           }})

    //detail页面接收
     let filmId= this.$route.params.filmId;

3、总结

• （1）参数都储存在$route当中，可以直接输出$route进行查看
• （2）$router.push不能与动态路由同时使用
• （3）router为VueRouter的实例，相当于一个全局的路由对象，里面含有很多属性和子对象
• （4）route相当于当前正在跳转的路由对象，可以从这里面获取name、path、params、query、等