vue的router部署从零开始

vue的router部署从零开始

先建立项目

vue init webpack learnvuerouter

通过映射表转化一些信息传达

前端渲染，后端渲染（100）https://www.bilibili.com/video/BV15741177Eh?p=100

后端渲染

jsp:java server page

后端路由

后端处理URL和页面之间的映射关系 缺点: 前端渲染 前端路由

安装和使用vue-router

安装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的内容

router-link的补充

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文件

路由的嵌套使用