介绍
这篇文章主要介绍怎么Vue。js使用Vue-Router 2实现路由功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
为什么要使用Vue Vue是一款友好的,多用途且高性能的JavaScript框架,使用Vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用Vue。
<强>注意: Vue-Router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用Vue-Router 2实现路由功能。
推荐使用npm安装。
npm install Vue-Router <强>一、使用路由
在主要。js中,需要明确安装路由功能:
import Vue 得到& # 39;vue # 39;
import VueRouter 得到& # 39;vue-router& # 39;
import App 得到& # 39;。/App.vue& # 39;
Vue.use (VueRouter)//1 .定义组件,这里使用从其他文件进口进来
import index 得到& # 39;。/组件/index.vue& # 39;
import hello 得到& # 39;。/组件/hello.vue& # 39;//2 .定义路由
const routes =, (
{,路径:& # 39;/指数# 39;,,组件:,index },
{,路径:& # 39;/你好# 39;,,组件:,hello },
］//3只创建,router 实例,然后传,“路线”,配置
const router =, new VueRouter ({
,路线
})//4只;创建和挂载根实例。通过,router 配置参数注入路由,从而让整个应用都有路由功能
const app =, Vue ({new
路由器,才能
,呈现:h =祝辞,h(应用)
})。美元山(& # 39;#应用# 39;) 经过上面的配置之后呢,路由匹配到的组件将会渲染到App.vue里的& lt; router-view> & lt;/router-view>
那么这个应用。vue里应该这样写:
& lt; template>
,& lt; div id=癮pp"比;
,,,,,& lt; router-view> & lt;/router-view>
,& lt;/div>
& lt;/template> 索引。html里呢要这样写:
& lt; body>
& lt; div id=癮pp"祝辞& lt;/div>
& lt;/body> 这样就会把渲染出来的页面挂载到这个id为应用程序的div里了。
<强>二、重定向,重定向
const routes =, (
{,路径:& # 39;/& # 39;,,重定向:,& # 39;/指数# 39;},,,,//,这样进/,就会跳转到/索引
{,路径:& # 39;/指数# 39;,,组件:,index }
) <强>三、嵌套路由
const routes =, (
{,路径:& # 39;/指数# 39;,,组件:,指数,
孩子们:,(
{,路径:& # 39;信息# 39;,,组件:,信息}
],}
) 通过/索引/信息就可以访问到信息组件了
<强>四,懒加载
const routes =, (
{,路径:& # 39;/指数# 39;,,组件:,resolve =祝辞,要求((& # 39;。/index.vue& # 39;],,解决),},
{,路径:& # 39;/你好# 39;,,组件:,resolve =祝辞,要求((& # 39;。/hello.vue& # 39;],,解决),},
) 通过懒加载就不会一次性把所有组件都加载进来,而是当你访问到那个组件的时候才会加载那一个。对于组件比较多的应用会提高首次加载速度。
<强>五,& lt; router-link>
在vue-router 1中,使用的是& lt; v-link=皗路径:& # 39;/指数# 39;}“祝辞& lt;/a>
在vue-router 2中,使用了& lt; router-link> & lt;/router-link>替换1版本中的一个标签
& lt; !——,字符串,——比;
& lt; router-link =癶ome"祝辞Home
& lt; !——,渲染结果,——比;
& lt; a href=https://www.yisu.com/zixun/凹摇眗el=巴獠縩ofollow”回家>
家
回家
用户
注册 <强>六、路由信息对象
1。美元的路线。路径
