Vue router安装使用简介
2020-07-24 11:52
32 查看
1、安装:npm install vue-router或cnpm install vue-router或yarn add vue-router
2、在新建的router.js中添加以下代码
import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter)
3、在src中新建view文件夹,在view新建例如:Home文件夹,在文件夹中新建index.vue
<template> <div id="home"> 我是Home页面 </div> </template> <script> export default { name: "index", data(){ return{ } }, components:{ }, methods:{ } } </script> <style scoped> </style>
4、在router.js中设置如下两步
import Home from './views/Home/' export default new VueRouter ({ routes: [ { path: '/', redirect: '/home' //设置默认指向 }, { path: '/home', component: Home } ] })
5、在App.vue中的div内引入
<router-view></router-view>
6、在main.js中 import router from ‘./router’
在new的实例中增加router,具体如下:
7、打开浏览器即可看到页面效果
相关文章推荐
- 渗透测试工具Immunity CANVAS使用安装简介
- Intel ICH7R SATA RAID(阵列)安装使用简介
- Centos 6.5使用U盘加网络安装简介
- 渗透测试工具Immunity CANVAS使用安装简介
- Git的初次使用 ; Git常用命令查询 ; Git push ; Git pull 2011-12-16 17:32 在介绍安装和简单使用前,先看一下百度百科中的简介吧: ———————————
- google protocol buffer 简介 版本 安装 使用 实例
- Nginx入门级简介,包括安装,基本使用,负载均衡,动静分离,反向代理,缓存应用等功能。
- MinGW安装与使用简介
- MongoDB入门1——简介、安装及基本使用
- svn服务端的安装与使用方式简介(一)
- 【SQL】MySQL的安装使用以及SQL语法简介
- Wireshark安装、简单使用、过滤器简介
- [转]Berkeley DB简介及安装使用
- SecureCRT的使用方法和技巧(一) SecureCRT下载安装及简介
- Docker学习笔记 — Compose简介、安装与简单使用
- 简介虚拟机的安装及使用
- WordPress系统的安装和使用简介
- IPControl安装及API使用简介
- Tizen SDK安装和使用(二)-Tizen平台简介
- review board 安装和使用系列 ---(一)RB简介