先建立项目
vue init webpack learnvuerouter
通过映射表转化一些信息传达
后端渲染
jsp:java server page
后端路由
后端处理URL和页面之间的映射关系 缺点: 前端渲染 前端路由
安装vue-router
npm install vue-router --save
//配置路由相关信息 import VueRouter from 'vue-router' import Vue from 'vue' import Home from '../components/Home' import About from '../components/About' //1.通过Vue.use(插件),安装插件 Vue.use(VueRouter) // 2.创建VueRouter对象 const routes = [ { path:'', redirect: '/home' //redirect重定向 }, { path:'/home', component:Home }, { path:'/about', component:About } ] const router = new VueRouter({ //配置路劲和组件之间的应用关系 routes, mode:'history' //去掉#号 }); //3.将router对象传入道Vue实例中 export default router创建路由实例 App.vue
<template> <div id="app"> <h2>我是APP组件</h2> <router-link to="/home">首页</router-link> <router-link to="/about">关于</router-link> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> </style>About.vue
<template> <div class=''> <h2>我是关于</h2> <p>我是关于内容,呵呵呵</p> </div> </template> <script> export default { data() { return { name:'关于' }; }, computed: {}, watch: {}, methods: { }, created() { }, mounted() { }, beforeCreate() {}, beforeMount() {}, beforeUpdate() {}, updated() {}, beforeDestroy() {}, destroyed() {}, activated() {}, components: {}, } </script> </style>Home.vue
<template> <div class=''> <h2>我是首页</h2> <p>我是首页内容,哈哈哈</p> </div> </template> <script> export default { data() { return { name:'About' }; }, computed: {}, watch: {}, methods: { }, created() { }, mounted() { }, beforeCreate() {}, beforeMount() {}, beforeUpdate() {}, updated() {}, beforeDestroy() {}, destroyed() {}, activated() {}, components: {}, } </script>main.js
import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, render: h => h(App) })重定向,默认路径是home,显示home.vue的内容
App.vue
<template> <div id="app"> <h2>我是APP组件</h2> <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-view/> </div> </template> <script> export default { name: 'App' } </script> <style> /* .router-link-active{ color: #f00; } */ .active{ color: red; } </style>App.js
<template> <div id="app"> <!-- <h2>我是APP组件</h2> <router-link to="/home" tag="button" replace active-class="active">首页</router-link> <router-link to="/about" tag="button" replace active-class="active">关于</router-link> --> <button @click="homeClick">首页</button> <button @click="aboutClick">关于</button> <router-view/> </div> </template> <script> export default { name: 'App', methods: { homeClick(){ //通过代码修改路由 vue-router this.$router.push('/home') }, aboutClick(){ this.$router.push('/about') }, }, } </script> <style> /* .router-link-active{ color: #f00; } */ .active{ color: red; } </style>App.vue index.js User.vue
<template> <div class=''> <h2>我是用户界面</h2> <p>我是用户的相关信息,嘿嘿</p> <h2>{{userId}}</h2> <h2>{{$route.params.userId}}</h2> </div> </template> <script> export default { data(){ return{ message:'aaa' } }, name:"User", computed: { userId(){ return this.$route.params.userId } //router有很多个路由,route是当前哪一个路由处于活跃状态哪个就是 }, watch: {}, methods: { }, created() { }, mounted() { }, beforeCreate() {}, beforeMount() {}, beforeUpdate() {}, updated() {}, beforeDestroy() {}, destroyed() {}, activated() {}, components: {}, } </script> <style scoped> </style>router有很多个路由,route是当前哪一个路由处于活跃状态哪个就是
执行命令行npm run build
第三方东西 对打包的模块化做底层支撑的函数
一个懒加载会对应一个js文件