在vue项目中引入vue-router并使用

1.使用命令行引入vue-router

cnpm install vue-router --save

在package.json文件中, 可以看到vue-router安装成功

在vue项目中引入vue-router并使用

2.与main.js同级创建router.js

在vue项目中引入vue-router并使用

 

 2.1.router.js文件的内容如下

HelloWorld组件为模板组件
import Vue from 'vue';
import VueRouter from 'vue-router';
import HelloWorld from './components/HelloWorld.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/helloworld',
        component: HelloWorld
    }
];

const router = new VueRouter({
    routes
});

export default router

3.在main.js中把刚刚创建的router.js引入,并使用

在vue项目中引入vue-router并使用

 

4.在app.vue中写入router-view标签

在vue项目中引入vue-router并使用

 

 vue-router已经创建部署完毕

5.在url地址栏中输入:http://localhost:8080/#/helloworld,即可访问

 

上一篇:SpringBoot-入门HelloWorld


下一篇:Linux内核分析— —扒开系统调用的三层皮(下)