Vue 路由基本使用方法
Posted qi1007
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 路由基本使用方法相关的知识,希望对你有一定的参考价值。
1、安装
安装Vue-route有俩种方法:
1.1 直接引入
<script src="vue.js"></script> <script src="vue-router.js"></script>
vue-router下载链接:https://unpkg.com/[email protected]/dist/vue-router.js
1.2 使用npm下载
npm install vue-router
1.3 vue 添加路由
如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:
在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码
import Vue from ‘vue‘ import VueRouter from ‘vue-router‘ Vue.use(VueRouter)
或者跳转到该文件目录下输入
vue add router
2、使用
2.1 引入Vue和VueRouter插件
<script src="vue.js"></script> <script src="vue-router.js"></script>
html页面:
<div id="box"> </div> <!--定义模版--> <template id="a"> <div> 第一个router </div> </template> <template id="b"> <div> 第二个router </div> </template>
js代码:
var routes = [ { path:"/one", component:{template:"#a"} }, { path:"/two", component:{template:"#b"} }, ]; // 定义路由组件 var router = new VueRouter({ routes }); // 定义路由 new Vue({ el:"#box", router });
将模版增添链接
<div id="box"> <router-link to="/one">One</router-link> <router-link to="/two">Two</router-link> <router-view></router-view> </div>
使用vue添加时会添加一个文件,文件里会有俩个默认的vue格式的文件,可以删除
在router.js中可配置
以上是关于Vue 路由基本使用方法的主要内容,如果未能解决你的问题,请参考以下文章