访问不同的路径，就可以返回不同的结果（不同的组件）
前端自己处理页面跳转都是两种方式：
- hash模式：开发时使用hash，不会导致404错误，但是不支持SEO
- h5中的history.pushState：上线采用h5的跳转
VUE中的路由： [安装]
- 1、在要使用路由的项目中打开CMD命令 输入
npm install vue-router,安装vue的路由模块 - 2、在页面中先引入
vue.js,再引入vue-router.js，因为vue-router是基于vue的
[使用]
- 1、声明创建路由表，在路由表中将路径和对应的组件关联起来
- 2、初始化路由并传入路由表
- 3、在vue的实例中注册路由
router-view（全局组件：用来将路由渲染到页面上）
- 4、在页面中使用
router-view这个全局组件来将路由渲染到页面上
let home={template:‘<div>首页</div>‘};
let list={template:‘<div>列表页</div>‘};
//1、创建路由表：routes为路由的映射表 配置路径和组件的关系（名字最好用routes）
let routes=[
//路径前必须加 ‘/’
{path:‘‘,component:home},//默认展示的路由（默认展示的不需要加/）
{path:‘/home‘,component:home},//一个路径对应一个组件
{path:‘/list‘,component:list},
{path:‘*‘,redirect:‘/home‘}//用户随便输入路径时，重定向到home组件，防止出现404
];
//2、初始化路由（名字最好用router）
let router=new VueRouter({//初始化路由：传入路由表
routes:routes//路由中提供的路由表属性名就是routes所以可以简写如下
routes
});
//3、在vue实例中注册路由，之后就可以在页面中使用了
let vm=new Vue({
el:‘#app‘,
router//注册路由（此处为简写方式，理由同上边路由表的简写方式）
})
//4、页面中使用router-view这个全局组件来将路由渲染到页面上
<div id="app">
<router-view></router-view>
</div>
router-link（全局组件，用来实现点击跳转，相当于按钮）
- 5、使用
router-link全局组件，来实现点击跳转
router-link存在两个属性： - to：跳转到哪个（必须加，值为要跳转的路径）
- tag：要把router-link变为哪个标签（不改默认是a标签）
//修改上面的HTML如下 <div id="app"> <router-link to="/home" tag="button">首页</router-link> <router-link to="/list" tag="button">列表页</router-link> <router-view></router-view> </div>
页面返回与跳转的方法
当在vue的实例中注册过路由之后，每个组件上都会有一个名叫
$router的对象，还有一个叫做$route的对象；
$router：存储了跳转的方法
- 组件.$router.push()：强制跳转到某个路径，参数为路径
- 组件.$router.replace()：路由替换，将当前路径替换为新的路径（很少用到）
- 组件.$router.go()：返回某一级，参数为返回多少级（-1为上一级，1为下一级）
$route：存储了很多需要的参数只要路径改变了，
$route值就会改变,可以通过watch方法监听$route属性，根据路径的不同来发送ajax请求获取到不同的数据
- 组件.$route.params：值是一个对象，存储了路径匹配之后的值
//由于路径有很多，而我们不能把路径写死，所以要写成类似正则的形式来匹配路径
/article/2/d //一个路径
/article/:c/:a //表示路径匹配，和上面的匹配后产生一个对象，存在$route.params当中：{c:2,a:d}
路由的嵌套
可在路由表中嵌套二级路由，嵌套二级路由的一级路由的template也要做对应的修改；
<div id="app"> <router-link to="/home">首页</router-link> <router-link to="/detail">详情页</router-link> <router-view></router-view><!--一级路由显示区域--> </div> <template id="detail"> <div> <router-link to="/detail/info">个人中心</router-link> <router-link to="/detail/about">关于我</router-link> <router-view></router-view><!--二级路由显示区域--> </div> </template>
//组件 let home={template:‘<div>home</div>‘}; let detail={template:‘#detail‘}; let info={template:‘<div>info</div>‘}; let about={template:‘<div>about</div>‘}; //创建路由表 let routes=[ {path:‘/home‘,component:home}, { path:‘/detail‘, component:detail, //二级路由写在childern属性当中 children:[ //二级以及二级以上路由的路径永远不带‘/’，如果带‘/’代表是一级路由 {path:‘info‘,component:info}, {path:‘about‘,component:about} ] }, ]; //初始化路由并传入路由表 let router=new VueRouter({routes}); let vm=new Vue({ el:‘#app‘, //注册路由 router })
