vue-route使用 _JavaScript

vue-router中的路由也是基于上面的内容来实现的
在vue中实现路由仍是相对简单的。因为页面中所有内容都是组件化的，只要把路径和组件对应起来就可以了，然后在页面中把组件衬着出来。
1，页面实现（html模版中）
在vue-router中, 也可以看到它界说了两个标签<router-link> 和<router-view> 。 <router-link> 就是界说页面中点击的部门，<router-view> 就是点击后，显示内容的部门。所以 <router-link> 还有一个很是主要的属性 to，它界说点击之后，要到哪个路径下，如：<router-link to="/home">Home</router-link>
2， js 中设置装备摆设路由
起首要界说route, 一条路由的实现。它是一个对象，最根基的一条路由由两个部门构成： path: component. path 指路径，component 指的是组件。如：{path:'/home', component: home}

需要这些哦
JavaScript
方式/
1这里有两条路由，构成一个routes:

文章插图

2最后建立router 对路由进行办理，它是由机关函数 new vueRouter() 建立，接管routes 参数。

文章插图

3设置装备摆设完当作后，把router 实例注入到 vue 根实例中,就可以利用路由。

文章插图

4执行过程：当用户点击 router-link 标签时，会去寻找它的 to 属性，它的 to 属性和 js 中设置装备摆设的路径{ path: '/home', component: Home} path 一一对应，从而找到了匹配的组件，最后把组件衬着到 <router-view> 标签。所有的这些实现才是基于hash 实现的。
【vue-route使用】vue-cli 建立一个项目体验一下, 当然不要健忘安装vue-router
1, 在src 目次下新建两个组件，home.vue 和 about.vue

文章插图

52, 在 App.vue中界说<router-link > 和 </router-view>

文章插图

63, 在 src目次下再新建一个router.js 界说router, 就是界说路径到组件的映射。

文章插图

74，把路由注入到根实例中，启动路由。这里其实还有一种方式，就像store 注入到根实例中，可以在main.js中引入路由，注入到根实例中。

文章插图

85，这时点击页面上的home 和about 可以看到组件往返切换。当初次进入页面的时辰，页面中并没有显示任何组件。想让页面一加载进来就显示home页面，这需要重定标的目的，所谓重定标的目的，其实就是从头给它指定一个偏向，好比当用户点击home 的时辰，我们让它指标的目的about.
这用到了redirect 设置装备摆设。刚进入页面的时辰，它的路径是 '/', 所以从头界说到home