前端路由工作原理与使用

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