vue-router的安装与简单使用

1.安装

打开命令行进入到项目文件夹下,运行命令

  1. npm install vue-router --save  

等待安装完毕。

2.使用

打开Vue项目下的main.js文件,导入vue-router。

import VueRouter from 'vue-router'

然后用Vue.use()使用路由

Vue.use(VueRouter);
//然后创建VueRouter实例并写配置项
const router = new VueRouter({
	mode:"history",//如果不加这个参数会在路径前出现一个#号 如http://你的网站根目录/#/page1
      routes:[
      {path:'/',component://这里写要加载的组件},
      {path:'/这里写进入的地址',component:这里写要加载的组件}
      {path:'/page1',component:Page1} //这个例子就是进入 http://你的网站根目录/page1 时加载Page1组件。
      ]
});

配置完成以后我们需要在Vue实例中引入它


然后打开App.vue组件,在id为app的div中加入


<router-view></router-view>标签的含义是加载的组件在这里显示

<router-link></router-link>和a标签差不多,但不同的是这个标签不会刷新页面


阅读更多
想对作者说点什么? 我来说一句

Vue-router参考手册.CHM

2016年11月21日 128KB 下载

没有更多推荐了,返回首页

不良信息举报

vue-router的安装与简单使用

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭