在vue-cli中使用路由
2024-10-19 16:46:37
1.首先npm中是否有vue-router
一般在vue-cli的时候就已经下载好了依赖包了
2.使用vue的话正常的需要涉及这几个文件
demo/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello'//首页
import Test from '../components/test'//需要跳转的页面 给组件重新命名 Vue.use(Router) export default new Router({
routes: [
{//首页
path: '/',
name: 'Hello',
component: Hello
},
{//需要跳转的页面
path:'/test',
name:'test',
component:Test//组件名字
}
]
})
demo/src/app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<p>
<router-link to="/home">home</router-link>//跳转首页
<router-link to="/test">test</router-link>//跳转新页面
</p>
<router-view></router-view>//页面渲染放置的部分
</div> </template> <script>
export default {
name: 'app'
}
</script> <style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
demo/src/main.js
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
}).$mount('#app')//实例挂载到元素中
两个页面的组件
这样的话,基本的路由设置就好了,可以按照正常的npm run dev运行这个项目了
另外还有嵌套 自定义多种路由
具体的路由内容可以查看:https://router.vuejs.org/zh-cn/installation.html
最新文章
- CSS-垂直|水平居中问题的解决方法总结
- Win10搭建Linux开发环境之网络连接设定
- 获取移除指定Url参数(原创)
- Angular js 之动态传数据到下一个页面和动态通过ng-click进入不同的页面
- Zedboard安装桌面系统ubuntu及opencv(1)
- 在eclipse中把之前的Tomcat 6删掉,不能再建
- oracle clob like
- SecureCRT自动记录日志【记录键入的所有命令和打印的结果信息】
- Zend Studio 上 安装使用Aptana插件(html,css,js代码提示功能) .
- 微信支付配置信息,JSAPI接口,H5调用微信js接口支付,微信公众号支付
- Castle IOC FOR MVC 使用方法
- windows7怎么共享文件夹
- PHP之闭包详解
- C++套接字类CxUdpSocket的设计
- 在shell脚本中使用alias
- Linux文件与目录管理 - ls, cp, mv
- MIP开发教程(二) 使用MIP-CLI工具调试MIP网页
- Centos 安装pureftpd工具
- linux系统坏了,进不了登陆界面怎么办?
- FireFox 浏览器插件/扩展开发学习