vue2.0配置路由

古希腊哲学家芝诺的学生问他：“老师，难道你有不懂得的东西吗？”芝诺风趣地回答：“如果用小圆代表你们学到的知识，用大圆代表我学到的知识，那么大圆的面积是多一点；但两圆之外的空白，都是我们的无知面，圆越大，其圆周接触的无知面就越多。”

先说下端口配置吧

项目根目录下新建一个文件叫vue.config.js

代码语言：javascript复制

module.exports = {
    devServer: {
        port: 3000
    }
}

然后npm run serve运行项目，可以看到端口号变了

然后再配置个路由吧

代码语言：javascript复制

cnpm i vue-router

在main.js中引入

代码语言：javascript复制

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'



Vue.config.productionTip = false

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

然后在src下建一个router目录，里面再放一个index.js

代码语言：javascript复制

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: [
        { path: '*', redirect: { name: '404' } },
        { path: '/', redirect: { name: 'home' } },
        { path: '/404', name: '404', component: resolve => require(['../views/common/404.vue'], resolve) },
        { path: '/home', name: 'home', component: resolve => require(['../views/sys/home.vue'], resolve) }
    ]
})

然后创建两个页面

主页面

代码语言：javascript复制

<!--  -->
<template>
  <div class>Home</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
</style>

以及404页面

代码语言：javascript复制

<!--  -->
<template>
  <div>404</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */
</style>

然后修改App.vue

代码语言：javascript复制

<template>
  <transition v-bind:css="false" name="fade">
    <router-view></router-view>
  </transition>
</template>

<script>
export default {};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>

输入npm run serve运行

可以看到我们的路由生效了

访问http://localhost:3000/

可以看到跳转到了http://localhost:3000/home

访问不存在的页面http://localhost:3000/ruben

可以看到跳转到404页面了

路由配置就是这么简单啦

http javascript npm

0 人点赞