Vue路由详解

        路由:他是一个能实现业务场景切换,单页面应用(SPA),所有功能都在一个html页面上实现

        vue路由:

                路径和组件的映射关系.

        路由的优缺点

              优点:

                        整体不刷新页面,用户体验更好

                        数据传递更加容易,开发效率更高

                缺点:

                        开发成本高(费程序员....)

                        首次记载会比较慢,不利于seo

         路由加载的是页面组件,开发中常创建于/src/views内

         使用流程:

                先创建好几个一会要用到的views里的页面组件,这里以Find,My,Part为例

                1.npm i vue-router

                2.引入VueRouter到main.js

                3.Vue.use(VueRouter)   此时有两个全局组件

                        <RouterView>   和  <RouterLink>  后面会详细介绍

                4.创建规则数组

                         const routes = [
                         {
                                path:/xxx,
                                component:组件名 //记得要引入组件
                          },
                          {
                                path:/xxx,
                                 component:组件名 //记得要引入组件
                           },
                       ]

                5.实例化VueRouter

                         const router = new VueRouter({
                                routes
                            })

                6.注入到vue实例中

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

                7.在使用的vue文件放置挂载点,使用挂载点

                        在合适的位置

                                设置路由
                                <router-view></router-view> 

    main.js👇            

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Find from './views/Find.vue'
import My from './views/My.vue'
import Part from './views/Part.vue'
import NotFound from './views/NotFound.vue'
Vue.config.productionTip = false
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: "/find"
  },
  {
    path: '/find',
    name: "MyFind",
    component: Find
  },
  {
    path: '/my',
    component: My,
    name: 'My'
  },
  {
    path: '/part/:name',
    component: Part
  },
  {
    path: '*',
    component: NotFound
  }
]

const router = new VueRouter({
  routes,
  mode: "history"
})


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

    创建实例化的另一个组件<router-link>声明式导航

                 声明式导航,此时可以跳转到指定的路径
                                <router-link to='/xxx'>点击跳转</router-link>

                声明式导航的传参:有两种方式

                   第一种:

                       传:
                                <router-link to='/xxx?参数名=哈哈'>点击内容</ router-link>
                        接:
                                $route.query.参数名

                    第二种

                        传:在main.js规则对象中,

                                path:/path名字/:参数名

                                路由使用处

                                <router-link to='/xxx/值'>点击内容</ router-link>

                        接:

                                $route.params.参数名

        路由的重定向:写在创建规则对象数组中

                    

const routes = [
  {
    path: '/',
    redirect: "/find"
  },
  {
    path: '/find',
    name: "MyFind",
    component: Find
  },
  {
    path: '/my',
    component: My,
    name: 'My'
  },
  {
    path: '/part/:name',
    component: Part
  },
  {
    path: '*',
    component: NotFound
  }
]

          路由模式  在main.js中设置

                hash路由:地址里面有#

                history路由:没有#   

                        

const router = new VueRouter({
  routes,
  mode: "history"
})

         编程式导航:

               

this.$router.push({
         // name: "My",  //可以在main.js的规则中声明一个name,此处引用也可以跳转
        path: "/my",
      });

         用JS跳转传参

   跳转传参

 this.$router.push({
        // name: "My",
        path: "/my",
        // params: {
        //   name: "bobo",
        //   age: 22,
        // },
        query: {
          name: "bobo",
          age: 22,
        },
      });

   接收:一定要一一对应 如果用params传值就用params接收 同理query

  <!-- <div>我是My {{ $route.params.name }}----{{ $route.params.age }}</div> -->
  <div>我是My {{ $route.query.name }}----{{ $route.query.age }}</div>

       这里需要注意:使用path跳转的时候,会自动忽略params的参数

路由嵌套

        在main.js中配置,

                1.一级路由path从/开始定义

                2.二级路由往后path直接写名字,不需要/开头

                3.嵌套路由在上级的children中的数组里面配置

        👇main.js       

const routes = [
  {
    path: '/',
    redirect: "/find"
  },
  {
    path: '/find',
    name: "MyFind",
    component: Find,
    children: [
      {
        path: 'ranking',
        component: Ranking
      },
      {
        path: 'recommend',
        component: Recommend
      },
      {
        path: 'songList',
        component: SongList
      },
    ]
  },
  {
    path: '/my/:age',
    component: My,
    name: 'My'
  },
  {
    path: '/part/:name',
    component: Part
  },
  {
    path: '*',
    component: NotFound
  }
]

const router = new VueRouter({
  routes,
  mode: "history"
})

   使用: 上面to属性的路径一定要完整

        

 <div class="nav_main">
            <router-link to="/find/recommend">推荐</router-link>
            <router-link to="/find/ranking">排行榜</router-link>
            <router-link to="/find/songlist">歌单</router-link>
        </div>

        <div>
          <router-view></router-view>
        </div>

全局前置守卫:路由跳转之前,触发的函数 

     main.js中,一定要调用next()  为false的时候不跳转

let isLogin = false
router.beforeEach((to, from, next) => {
  if (!isLogin && to.path === '/my') {
    alert('请登录')
    next(false)
  } else {
    next()
  }

})