前端路由工作原理与使用

<script>
import MyAbout from './views/my-about.vue'
import MyHome from './views/my-home.vue'
import MyMovie from './views/my-movie.vue'
export default {
  components: {
    MyHome,
    MyAbout,
    MyMovie
  }
}
</script>
复制代码

<template>
  <div>
    <h1>App组件</h1>
    <component :is="comName"></component>
  </div>
</template>
​
<script>
export default {
  // ...省略其他
  data () {
    return {
      comName: 'MyHome'
    }
  }
}
</script>
复制代码

<template>
  <div>
    <h1>App组件</h1>
    <a href="#/home">首页</a>&nbsp;
    <a href="#/movie">电影</a>&nbsp;
    <a href="#/about">关于</a>&nbsp;
    <component :is="comName"></component>
  </div>
</template>
复制代码

created () {
  window.onhashchange = () => {
    switch(location.hash) {
      case '#/home':
        this.comName = 'my-home'
        break
      case '#/movie':
        this.comName = 'my-movie'
        break
      case '#/about':
        this.comName = 'my-about'
        break
    }
  }
},
复制代码

// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'
​
// 使用插件 - 重要
Vue.use(VueRouter)
​
// 导入组件
​
import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'
​
​
// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: Page1  // 装入组件 Page1
    },
    {
      path: "/page2",
      component: Page2
    },
    {
      path: "/page3",
      component: Page3
    }
  ]
})
​
export default router
复制代码

import router from './router/index.js'
​
new Vue({
  router: router, // 使用路由
  render: h => h(App),
}).$mount('#app')
​
复制代码

<router-view></router-view>
复制代码

<template>
  <div>
    <h1>App组件</h1>
    <ul>
      <li><router-link to="/home">首页</router-link></li>
      <li><router-link to="/movie">电影</router-link></li>
      <li><router-link to="/about">关于</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>
复制代码

<div>
    你要浏览的商品是: {{ $route.query.name }} {{ $route.params.goodsId}}
</div>
复制代码

{
    path: "/goods",
    component: MyGoods
  },
  {
    path: "/goods/:goodsId",
    component: MyGoods
  },
复制代码

<li><router-link to="/goods?name=外套">外套</router-link></li>
<li><router-link to="/goods/123">详情</router-link></li>
复制代码

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  }
]
复制代码

import NotFound from "@/components/NotFound";

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  },
  
  // ...正常路由
  
  { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
  }
]
复制代码

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
    path: "路由路径",
    query: {
        "参数1":值1,
        "参数2":值2
    }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "路由名称",
    params: {
        "参数1":值1,
        "参数2":值2
    }
})


// 后退
$router.back()
复制代码

routes:[
  {
    path: '/page1', 
    component: Page1, // 这个组件内部还有router-view
    children: [
      {
        path:'',  // path为空，表示当 #/page1时，显示 Page1组件+组件1
        component: 组件1  // 
      },
      {
        path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2
        component: 组件2
      },
      {
        path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3
        component: 组件3
      }
    ]
  }
]
复制代码

import Vue from 'vue'
import VueRouter from 'vue-router'

// 一级路由
import FindMusic from '@/views/FindMusic'
import MyMusic from '@/views/MyMusic'

// 二级路由
import Recommend from '@/views/Child/Recommend'
import Ranking from '@/views/Child/Ranking'
import SongList from '@/views/Child/SongList'

Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        redirect: "/find"
    },
    {
        path: "/find", // 一级路由
        component: FindMusic,
        // find下的二级路由
        children: [
              {
                path: "/find", // 和父路由路径一样，默认加载这个路由
                component: Recommend
              },
              {
                path: "/find/ranking",
                component: Ranking
              },
              {
                path: "/find/songlist",
                component: SongList
              }
        ]
    },
    {
        path: "/my",
        component: MyMusic
    }
];

const router = new VueRouter({
    routes
})

export default router
复制代码

<template>
  <div>
    <div>
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
    </div>
    <div style="border: 1px solid orange">
      <!-- 一级路由挂载点 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.router-link-active{
  color: orange;
}
</style>
复制代码

<template>
  <div>
    <p>发现音乐 - 页面</p>
    <div>
      <router-link to="/find">推荐</router-link>
      <router-link to="/find/ranking">排行榜</router-link>
      <router-link to="/find/songlist">歌单</router-link>
    </div>
    <div style="border: 1px solid red; padding: 20px solid block;">
         <!-- 二级路由挂载点 -->
        <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
</style>
复制代码

// 路由前置守卫
router.beforeEach((to, from, next) => {
  // to代表要跳转到哪个路径去, to的值是个对象可以打印看到
  // from代表从哪个路径跳过去
  console.log(to);
  console.log(from);

  // fullPath带?后面参数的, path是完整的路径
  console.log("路由要跳转了");

  // 模拟判断登录了没有, 登录后才能去我的音乐
  let loginFlag = false; // 假设false代表未登录
  if (to.path == "/my" && loginFlag == false) {
    // 如果去个人中心页面, 判断未登录, 提示登录(并强制跳转回find)
    alert("请先登录！");
    next("/find");
  } else {
    // 如果不去/my页面就直接跳转
    next();
  }
});
复制代码

router.afterEach((to, form) => {
    console.log(to);
    console.log(form);
    console.log("路由发生了跳转");
})
复制代码

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持
})
复制代码

链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27