摘要:创建实例,然后传配置你还可以传别的配置参数不过先这么简单着吧。创建实例及配置,即。
昨天自己在家做了一个前端上线系统,使用到的技术有VUE框架,element-ui, vue-router
传送门:https://github.com/liyang1234...
页面效果如下:
其中的router的使用方法和一些配置文件 webpack入口文件main.js,router的index.js内容如下:
使用router官方例子
Hello App!
Go to Foo
Go to Bar
router-link标签:跳转的链接,to=""是必须的属性,双引号中的内容是我们接下来在JS文件中定义的路由path。
router-view标签:展示我们匹配到的组件的区域
router-link的一些属性
//to属性 string|object
Home
Home
Home
Home
User
Register
//replace属性 true|false 不留下 history 记录。
Home
//append属性 true|false 追加路径
Home
//tag属性 string 设置渲染标签
foo
foo
//active-class 属性 string 激活时使用的 CSS 类名
// 0. 如果使用模块化机制编程,导入Vue和VueRouter,要调用 Vue.use(VueRouter)
// 1. 定义(路由)组件。
// 也可以从其他文件 import 进来
const Foo = { template: "foo" }
const Bar = { template: "bar" }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
router
}).$mount("#app")
// 现在,应用已经启动了!
JavaScript文件主要做的事情是:
定义路由列表,即routes。创建router实例及router配置,即router。创建和挂载根实例。
以上只是教我们用最简单的方法使用vue-router。但实际开发过程中,首先我们的vue组件显然不会只有一个template模板这么简单,会用到vue的单文件组件;
其次我们通常会希望
既然是单页应用(SPA),那么整个项目有以下三个文件是必要的:
一个html文件:index.html
一个webpack打包时的入口js文件:main.js
一个根vue组件,作为其他组件的挂载点:app.vue
用vue-cli生成webpack打包的vue项目
npm install webpack -g
npm install vue-cli -g
//打开要创建的项目路径目录,创建项目
vue init webpack-simple <项目名>
cd <项目名>
npm install vue-router --save
npm run dev
生成的项目类似这样的:
在components下面新建两个vue文件 index.vue和hello.vue
//index.vue
//hello.vue
修改main.js文件
//引入并安装vue-router插件 import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); //引入index.vue和hello.vue组件 import App from "./App.vue"; import index from "./components/index.vue"; import hello from "./components/hello.vue"; //定义路由 const routes = [ {path:"/",component:App}, { path: "/index", component: index }, { path: "/hello", component: hello } ] //创建 router 实例,然后传 routes 配置 const router=new VueRouter({ routes }); //创建和挂载根实例。通过 router 配置参数注入路由,从而让整个应用都有路由功能 new Vue({ el:"#app", router });
修改App.vue
修改index.html
vue-webpack-simple
运行效果如下:
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113962.html
摘要:创建实例,然后传配置你还可以传别的配置参数不过先这么简单着吧。创建实例及配置,即。 昨天自己在家做了一个前端上线系统,使用到的技术有VUE框架,element-ui, vue-router传送门:https://github.com/liyang1234...页面效果如下: showImg(https://segmentfault.com/img/bVbhLN4?w=1297&h=66...
摘要:创建实例,然后传配置你还可以传别的配置参数不过先这么简单着吧。创建实例及配置,即。 昨天自己在家做了一个前端上线系统,使用到的技术有VUE框架,element-ui, vue-router传送门:https://github.com/liyang1234...页面效果如下: showImg(https://segmentfault.com/img/bVbhLN4?w=1297&h=66...
摘要:路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由,然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面,通常由多层嵌套的组件组合而成。 一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问...
摘要:路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由,然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面,通常由多层嵌套的组件组合而成。 一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问...
摘要:路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由,然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面,通常由多层嵌套的组件组合而成。 一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问...
阅读 2044·2021-10-25 09:48
阅读 2916·2021-09-22 14:59
阅读 1854·2019-08-29 16:52
阅读 955·2019-08-29 16:07
阅读 2410·2019-08-29 12:38
阅读 1937·2019-08-26 13:23
阅读 954·2019-08-26 11:49
阅读 3373·2019-08-26 10:56