目录

一.使用路由

1.1配置路由

1.2采用路由

二.路由懒加载

三.路由重定向

四.嵌套路由

五.路由跳转

1.1标签式

1.2编程式

1.3路由的query参数

1.4命名路由 

前言:

vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示

一.使用路由

1.1配置路由

新建一个路由index.js 文件，建立【路径】与【视图组件】之间的映射关系

import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example/ContainerView.vue'
import LoginView from '@/views/example/LoginView.vue'
import NotFoundView from '@/views/example/NotFoundView.vue'Vue.use(VueRouter)const routes = [{path:'/',component: ContainerView},{path:'/login',component: LoginView},{path:'/404',component: NotFoundView}
]const router = new VueRouter({routes
})export default router

注:@代表src下

1.2采用路由

在 main.js 中采用我们的路由 js,其实在引入时可以省略index，因为index是个特殊的东西，默认找不到就找index

import Vue from 'vue'
import App from './views/App.vue'
import router from './router/index'//引入路由
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = falseVue.use(Element)
new Vue({router,store,render: h => h(App)
}).$mount('#app')

根组件是App.vue,内容为：

起到占位作用，改变路径后，这个路径对应的视图组件就会占据 的位置，替换掉它之前的内容

二.路由懒加载

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter)const routes = [{path:'/',component: () => import('@/views/example/ContainerView.vue')},{path:'/login',component: () => import('@/views/example/LoginView.vue')},{path:'/404',component: () => import('@/views/example/NotFoundView.vue')}
]const router = new VueRouter({routes
})export default router

• 静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度

• 动态导入是将组件的 js 代码放入独立的文件，用到时才加载

三.路由重定向

const routes = [{path:'/404',component: () => import('@/views/example/NotFoundView.vue')},{path:'*',redirect: '/404'}]

①redirect 可以用来重定向（跳转）到一个新的地址

②path 的取值为 * 表示匹配不到其它 path 时，就会匹配它

四.嵌套路由

比如当我们进入主页之后有分类，然后当选择其中一个分类之后进入对应的详情，这个时候组件内再要切换内容，就需要用到嵌套路由（子路由） ；官方文档中给我们提供了一个children属性，这个属性是一个数组类型，里面实际放着一组路由；这个时候父子关系结构就出来了，所以children属性里面的是路由相对来说是children属性外部路由的子路由；

const routes = [{path:'/',component: () => import('@/views/example/ContainerView.vue'),redirect: '/c/p1',children: [{ path:'c/p1',component: () => import('@/views/example/container/P1View.vue')},{ path:'c/p2',component: () => import('@/views/example/container/P2View.vue')},{ path:'c/p3',component: () => import('@/views/example/container/P3View.vue')}]},{path:'/login',component: () => import('@/views/example/LoginView.vue')},{path:'/404',component: () => import('@/views/example/NotFoundView.vue')},{path:'*',redirect: '/404'}
]

子路由变化，切换的是 ContainerView 组件 中 部分的内容

五.路由跳转

1.1标签式

container组件内:

标签导航，是通过转义为标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；

router-link属性介绍：

• to：用于指定跳转的路径
• tag：tag可以指定之后渲染成什么组件，比如我们下面的代码会被渲染成一个
• 元素，而不是 。 如：
• replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
• active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。

跳转
跳转

$route.query.id
$route.query.title

Vue Router query 命名路由 params propsimport VueRouter from "vue-router";
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'routes:[{path:'/about',component:About},{path:'/home',component:Home,children:[{path:'news',component:News},{path:'message',component:Message,children:[{path:'detail',component:Detail}]}]}]
})

Vue Router query 命名路由 params props

{path:'/demo',component:Demo,children:[{path:'test',component:Test,children:[{name:'hello' // 给路由命名path:'welcome',component:Hello,}]}]
}

跳转

跳转

跳转