1.router-link和router-view组件
src/App.vie文件内容：
<template> <div> <div> <router-link to="http://www.likecs.com/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template>在App.vue文件代码里有2个router-link组件和1个router-view组件
router-link组件实际上是封装了一个a标签，里面有一个重要的to属性，to属性指定的值是一个路径 router-link标签中有内容渲染，所以router-link标签有开标签和闭标签 router-view组件是视图渲染组件，通过router-link的to属性加载的组件都会在router-view里被渲染 router-view标签中没有内容渲染，所以router-view标签可以写成 <router-view/> 单标签的形式，这与 <router-view></router-view> 效果相同router-link的to属性指定的路径就是src/router/router.js文件中定义的路由
import Home from '@/views/Home.vue' // 引入Home.vue文件并设置引入名称为Home,@标签是在vue.config.js文件中定义的src路径的别名 export default [ // 路由列表是一个数组，在这个数组中定义了路由对象 { // 一个基本的路由对象包含path和component这两个属性 path: 'http://www.likecs.com/', // path属性是在浏览器中输入的跳转路径 component: Home, // component属性是指定要加载渲染的组件名称 }, { path: '/about', // 这里定义的是懒加载路由，即只有当访问这个路由时，才会加载 src/views/About.vue这个组件 component: () => import('@/views/About.vue'), } ] 2.路由配置 2.1 动态路由在src/router/router.js中新建一个路由对象
import Home from '@/views/Home.vue' export default [ { path: 'http://www.likecs.com/', component: Home, }, { path: '/about', component: () => import('@/views/About.vue'), },{ path:'/argu/:name', // 动态路由 component:() => import('@/views/argu.vue') } ]在src/views目录中创建argu.vue文件
argu.vue文件内容如下
<template> <div> {{ $route.params.name }} </div> </template> <script> export default { } </script>在浏览器中输入URL: :8080/#/argu/apple，页面上会渲染URL中对应的参数
同样的，当URL改成：:8080/#/argu/orange时，页面上渲染的结果也相应改变了
在上面的例子里，$route代表的是当前加载页面的路由对象，$route.params代表当前加载页面中的参数对象
所以$route.params.name表示的就是当前加载页面的参数对象中的name对应位置上的的值
不管浏览器的URL中输入的是name值是什么，$route.params.name都会被匹配到
这样就可以起到组件复用，只需要传递不同的参数，同一个页面就可以呈现不同的结果
2.2 嵌套路由在实际开发中，经常会用到多层嵌套的组件，多层嵌套组件可以通过嵌套路由来完成
修改src/router/router.js文件，新建嵌套路由
import Home from '@/views/Home.vue' export default [ { path: 'http://www.likecs.com/', component: Home, }, { path: '/about', component: () => import('@/views/About.vue'), },{ path:'/argu/:name', component:() => import('@/views/argu.vue') },{ path:'/parent', // 嵌套路由 component:() => import('@/views/parent.vue'), children:[ { path:'child', component:() => import('@/views/child.vue') } ] } ]然后在src/views目录下新建parent.vue文件和child.vue文件
parent.vue文件内容如下
<template> <div> I am parent page <router-view/> </div> </template> <script> export default { } </script>child.vue文件内容如下
<template> <div> I am child page </div> </template> <script> export default { } </script>浏览器打开URL：:8080/#/parent/child，渲染结果如下
修改src/router/router.js文件，为路由命名
import Home from '@/views/Home.vue' export default [ { path: 'http://www.likecs.com/', name: 'home', // 命名路由 component: Home, }, { path: '/about', name: 'about', // 命名路由 component: () => import('@/views/About.vue'), },{ path:'/argu/:name', component:() => import('@/views/argu.vue') },{ path:'/parent', component:() => import('@/views/parent.vue'), children:[ { path:'child', component:() => import('@/views/child.vue') } ] } ]