[学习笔记]Vue路由安装与使用
结合个人视频学习、友人指导意见与实际情况,做下总结~1、安装vue-router(在终端内项目文件夹下执行)npm install vue-router --save-dev2、在main.js下进行相关配置(1)将vueRouter和所需要的组件(Home.vue,HelloWorld.vue)导入一下;import Vue from 'vue'import VueRouter f...
·
结合个人视频学习、友人指导意见与实际情况,做下总结~
1、安装vue-router(在终端内项目文件夹下执行)
npm install vue-router --save-dev
安装成功后在终端重启下项目:npm run dev
2、在main.js下进行相关配置
(1)将vueRouter和所需要的组件(Home.vue,HelloWorld.vue)导入一下;
import Vue from 'vue'
import VueRouter from 'vue-router' //导入路由
import App from './App'
import HelloWorld from './components/HelloWorld'
import Home from './components/Home'
(2)声明要使用路由
Vue.use(VueRouter) //声明使用路由模块
(3)配置路由
const router = new VueRouter({
routes:[
{path:"/",component:Home},
{path:"/helloworld",component:HelloWorld},
],
mode:"history" //去掉url中的符号“#”
})
(4)在实例化的vue对象中使用router,如:
new Vue({
router,
el: '#app',
components: { App },
template: '<App/>'
})
(5)在主组件(App.vue)中展示路由模块
<template>
<div id="app">
<!--导航栏-->
<ul>
<!--使用路由跳转不用a标签,不会发生页面加载-->
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/helloworld">HelloWorld</router-link></li>
</ul>
<router-view></router-view> //展示路由模块
</div>
</template>
3、使用router
在地址栏(url)后输入helloworld,会跳转至HelloWorld.vue
更多推荐
已为社区贡献2条内容
所有评论(0)