vue项目原理分析-2：路由

路由的基本配置

基本参数

path

路由的访问路径。即url

component

访问路径对应的组件

扩展参数

name
路由指定命名，设置后可⽤params传参及使⽤name进⾏路由跳转
路由的跳转
router-link标签跳转
编程式导航
path和query搭配
params和name搭配
动态路由：什么是动态路由？
组件是同⼀个，只是通过不同的url参数渲染不同的数据
路径参数"使⽤冒号" : 标记

// route可以是对象，或者是字符串
// 对象的时候可通过路由的path或者name进⾏跳转
// 字符串的话只能是路由的path
this.$router.push(route)
// 路由传递参数, query和path配合， params和name配合
query: this.$router.push({path: '/', query: {id: 2}})
params: this.$router.push({name: 'home', params: {id: 2}})
{path: '/home/:id',component: home
} 在path⾥显式声明后，通过params传参后，参数不丢失同时参数被设置成必传参数

toHome: function () {this.$router.push({path:'/home',query:{name:'Jack'}})//传递参数this.$router.push({params: {id: 3},name: 'home'})

嵌套式路由：比如页面头部尾部不换，中间换掉，组件中嵌套不同组件

// 在需要嵌套的路由中补充children字段
{path: '/home/:id',component: home,children: []
}

导航守卫：

// to, from是路由对象，我们在路由⾥定义的参数都可以在这⾥取到，例如to.path或
from.name
router.beforeEach((to, from, next) => {// ...
next()
})

如main.js中

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'Vue.config.productionTip = false
router.beforeEach((to,from,next)=>{ //导航守卫console.log(to.path)next() //必须调用next方法后}
)
new Vue({router,store,render: h => h(App)
}).$mount('#app')

路由懒加载：

提⾼⻚⾯加载速度
避免进⼊项⽬后加载全部组件
在路由中的component中设置函数，⽤import⽅式进⾏使⽤

component: () => import('./views/Home.vue'),

ruoter.js

import vue from "vue"
import router from "vue-router"Vue.use(Router)export default new Router({routes: [{// path: '/home/:id',动态路由的传递参数path: '/home/:id',//意思就是必须传id才能进入页面name:'home',//定义该属性component: () => import('./views/Home.vue'),//路由懒加载children: [{path: '/child',//定义这个路径component: () => import('./views/Child.vue')}]//要定义的组件，在HOME里就显示出组件了,注意是列表表示。嵌套路由？}]
})

App.vue

<template><div id="app">this is app<!--    <router-view />--><button @click="passMsg">传你</button><m-parent :msg="c"></m-parent><router-link>to ="/home" > home</router-link> //router-link跳转<button @click="toHome">home</button> //编程式跳转<router-view></router-view>hi Iam there// router</div>
</template><style></style>
<script>
import bus from './util/bus'
import MParent from './views/Parent'export default {data(){return{a:'msga',b:'msga',c:'msga',}},components: {MParent},methods:{passMsg(){bus.$emit('msg','i am from app')},toHome: function () {// this.$router.push({path:'/home',query:{name:'Jack'}})传递参数this.$router.push({params: {id: 3},name: 'home'})//push跳转}}
}
</script>

Home.vue

<template><div><div>this is home<h1>{{$route.params.id}}</h1>//之前传入的id（:id）<router-view></router-view> //在哪里显示</div></div>
</template><script>
// // @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue"export default {name: "Home",components: {}
}
</script>
<style lang="scss" scoped>
</style>

vue项目原理分析-2：路由相关推荐

vue项目原理分析-1：组件间传值
整个项目目录(create project后) vue.config.js的配置 // vue.config.js 常⽤配置 module.exports = {devServer:{port:333 ...
vue项目原理分析-3：vuex
vuex官方网站 vuex初级: export default {// 组件间公共数据部分state: {},// 需要改变state中的数据时,要在mutation⾥定义改变的⽅法mutations ...
vue项目创建步骤和路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) vue导航守卫(全局守卫.单个路由独享.组件级守卫) 1 ...
vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
vue项目微信分享之后路由链接被破坏怎么办
异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加 ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...
Vue Router 原理分析与实现
陈丹青:看过的东西走过的路,还有你所经历的一切,都会经历一个开眼界的过程. 但眼界开了并不是一件好事情,反而顿悟之后从此你就会知道,你在社会之中是完全没有位置可言的.我算个屁,什么事都有人做过,都有人 ...
项目前端（一）、vue项目中引入vue-router路由组件
1.在项目根目录下,执行 npm install vue-vouter 是否成功引入router路由组件,我们可以查看package.json文件中dependencies标签下是否有vue-rout ...
十二、Vue项目 - 详情页动态路由、banner布局和公用图片画廊组件拆分
我是一个小菜鸡啊小菜鸡,但是小菜鸡要继续学新东西啊,新的一周加油吧!!! 文章目录配置动态路由 banner.vue 公用图片画廊组件拆分 src下新建common文件夹 banner.vue中使用 ...