Vue学习27_使用vue-router实现简易的路由跳转

使用vue-router实现简易的路由跳转

使用vue-router实现一个简易的路由跳转，其中使用到了keep-alive对不想频繁创建和销毁一个对象，希望在点击跳转到其他界面后，返回该界面时，某些东西得以保留，并且实现点击获取其他界面的数据时：

1. 组件代码：
   示例代码：组件About.vue：

<template>
  <div>
    <h2>我是关于</h2>
    <p>关于关于关于</p>
  </div>
</template>

<script>
export default {
  name: "About",
  // created() {
  //   document.title = "关于";
  // },
};
</script>

<style scoped>
</style>

组件Home.vue：

<template>
  <div>
    <h2>我是首页</h2>
    <p>首页首页首页</p>
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      path: "/home/news",
    };
  },
  created() {
    //document.title = "首页";
    console.log("home created");
  },
  mounted() {
    // console.log("mounted");
  },
  updated() {
    // console.log("updated");
  },
  destroyed() {
    console.log("home destroyed");
  },
  activated() {
    // console.log("activated");
    this.$router.push(this.path);
  },
  // deactivated() {
  //   console.log("deactivated");
  // },
  beforeRouteLeave(to, from, next) {
    this.path = this.$route.path 
    next()
  },
};
</script>

<style scoped>
</style>

组件HomeMessage.vue：

<template>
  <div>
      <ul>
          <li>消息1</li>
          <li>消息2</li>
          <li>消息3</li>
          <li>消息4</li>
      </ul>
  </div>
</template>
<script>
export default {
    name :"HomeMessage"
}
</script>
<style scoped>
</style>

组件HomeNews.vue：

<template>
  <div>
      <ul>
          <li>新闻1</li>
          <li>新闻2</li>
          <li>新闻3</li>
          <li>新闻4</li>
      </ul>
  </div>
</template>

<script>
export default {
    name :"HomeNews"
}
</script>
<style scoped>
</style>

组件Profile.vue：

<template>
  <div>
    <h2>我是Profile组件</h2>
    <p>姓名：{{ userName }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  name: "Profile",
  created() {
    // document.title = "我的";
    console.log("profile created");
  },
  destroyed() {
    console.log("Profile destroyed");
  },
  computed: {
    userName() {
      return this.$route.query.username;
    },
    age() {
      return this.$route.query.age;
    },
  },
};
</script>

<style scoped>
</style>

组件User.vue：

<template>
  <div>
    <h2>我是用户界面</h2>
    <p>用户用户用户</p>
    <h3>{{ userId }}</h3>
  </div>
</template>
<script>
export default {
  name: "User",
  // created() {
  //   document.title = "用户";
  // },
  computed: {
    userId() {
      return this.$route.params.userId;
    },
  },
};
</script>
<style scoped>
</style>

2. 路由配置：

// 导入Vue，下面要用到Vue.use
import Vue from 'vue'
// 导入router组件
import Router from 'vue-router'
// 导入helloworld组件
// import Home from '../components/Home.vue'
// import About from '../components/About.vue'
// import User from '../components/User.vue'

// 路由懒加载
const Home = () => import('../components/Home.vue')
const HomeNews = () => import('../components/HomeNews.vue')
const HomeMessage = () => import('../components/HomeMessage.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')
const Profile = () => import('../components/Profile.vue')

// 通过Vue.use(插件名称)，调用插件
Vue.use(Router)

// 防止重复点击切换路由造成错误
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}


// 创建路由对象，并且导出
const router = new Router({
  routes: [{
      path: '',
      redirect: '/home',
    },
    {
      path: '/home',
      component: Home,
      // 元数据
      meta: {
        title: '首页'
      },
      // 嵌套路由
      children: [
        // {
        //   path: '',
        //   redirect: 'news'
        // },
        {
          path: 'news',
          component: HomeNews
        },
        {
          path: 'message',
          component: HomeMessage
        },
      ]
    },
    {
      path: '/about',
      component: About,
      meta: {
        title: '关于'
      },
      beforeEnter: (to, from, next) => {
        // console.log("进入到关于")
        next()
      }
    },
    {
      path: '/user/:userId',
      component: User,
      meta: {
        title: '用户'
      },
    },
    {
      path: '/profile',
      component: Profile,
      meta: {
        title: '我的'
      },
    }
  ],
  mode: 'history',
  linkActiveClass: 'active'
})

// 全局导航守卫
// 前置守卫，跳转之前调用
router.beforeEach((to, from, next) => {
  // 从from跳转到to
  document.title = to.matched[0].meta.title
  // console.log("beforEach");
  // next必须调用
  next()
})

// 后置钩子：跳转之后调用
router.afterEach((to, from) => {
  // console.log("afterEach");

})
export default router

3. App.vue

<template>
  <div id="app">
    <h1>我是APP组件</h1>
    <!-- 更改active-link-active -->
    <!-- <router-link to="/home" tag="button" replace active-class="active"
      >首页</router-link
    >
    <router-link to="/about" tag="button" replace active-class="active"
      >关于</router-link
    > -->

    <!-- 在router文件夹中的index.js中修改 -->
    <!-- <router-link to="/home" replace>首页</router-link>
    <router-link to="/about" replace>关于</router-link> -->

    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/' + userId">用户</router-link>
    <router-link :to="{ path: '/profile', query: { username: 'zyt', age: 21 } }"
      >我的</router-link
    >
    <button @click="userClick">用户</button>
    <button @click="profileClick">我的</button>

    <!-- <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button> -->

    <!-- 需要频繁创建销毁某一个组件如profile -->
    <keep-alive exclude="Profile">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userId: "lisi",
    };
  },
  methods: {
    homeClick() {
      // 通过代码更改路由
      this.$router.push("/home");
      console.log("homeClick");
    },
    aboutClick() {
      this.$router.push("/about");
      console.log("aboutClick");
    },
    userClick() {
      this.$router.push("/user/" + this.userId);
    },
    profileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          username: "ltn",
          age: 22,
        },
      });
    },
  },
};
</script>

<style>
.active {
  color: red;
}
</style>

运行结果：

由于利用到了keep-alive，在这里，首页中还包含着子组件新闻和消息，在此切换消息组件：

点击切换到其他页面，再次切回时，还是停留在消息组件界面：

我的组件，其中名字和年龄时通过计算属性中返回this.$router…query.去获取App实例中的数据：