vue-cli搭建后如何加入新页面
2017-11-24 10:39
465 查看
使用vue-router配置路由 在vue根实例中注入
大概就是这样 链接用<router-link to="/play"></router-link>这样
昨天温故了一下vue2.0的路由 做个笔记简单记录一下!
1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js
2.然后修改原有a标签处代码 这里以一个ul li a 为例
使用 router-link标签替换原有a标签出 router-link会默认生成一个a标签 里面的to="" 指的是访问 to="home" 就是访问home, to="news" 就是访问news 经过改装后代码如下
3.在第一步的时候引入了vue-router.js 现在需要创建一个 路由的实例
上面的routes是具体的路由配置信息具体配置如下
path指的是访问的网址 对应上面<router-link to="xxx">里的to属性,后面component指的是对应模板
4.最后需要在调用出指定我们定义的上述定义的router
总结:总体来讲vue2.0比起老版本要简单很多
import Vue from 'vue' import VueRouter from 'vue-router' import topNav from '../components/topNav' import mine from '../components/mine' import searchPage from '../components/searchPage' import searchResult from '../components/searchResult' import playPage from '../components/playPage' import playbottom from '../components/playbottom' import latestPlay from '../components/latestPlay' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', component: mine }, { path: '/mine', component: mine }, { path: '/mine/searchPage', component: searchPage }, { path: '/mine/searchPage/searchResult', component: searchResult }, { path: '/playPage', component: playPage }, { path: '/latestPlay', component: latestPlay } ] }) export default router
import router from '../router' var app = new Vue({ el: "#app1", router, store: vuex_store, })
大概就是这样 链接用<router-link to="/play"></router-link>这样
昨天温故了一下vue2.0的路由 做个笔记简单记录一下!
1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js
2.然后修改原有a标签处代码 这里以一个ul li a 为例
<ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul>
使用 router-link标签替换原有a标签出 router-link会默认生成一个a标签 里面的to="" 指的是访问 to="home" 就是访问home, to="news" 就是访问news 经过改装后代码如下
<ul> <li><router-link to="/home">主页</router-likn></li> <li><router-link to="/news">新闻</router-likn></li> </ul>
3.在第一步的时候引入了vue-router.js 现在需要创建一个 路由的实例
const router = new VueRouter({ routes })
上面的routes是具体的路由配置信息具体配置如下
const routes = [ {path:'/home',component:Home}, {path:'/news',component:News} ]
path指的是访问的网址 对应上面<router-link to="xxx">里的to属性,后面component指的是对应模板
4.最后需要在调用出指定我们定义的上述定义的router
new Vue({ router, el:'xxxx' })
总结:总体来讲vue2.0比起老版本要简单很多
相关文章推荐
- vue脚手架(vue-cli)如何搭建项目
- 详解基于Vue-cli搭建的项目如何和后台交互
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- 如何利用vue-cli和webpack搭建vuejs项目
- vue cli3 如何配置多页面应用
- 详解如何使用vue-cli脚手架搭建Vue.js项目
- 新版vue-cli搭建多页面应用
- (vue:案例02) vue-cli 如何搭建项目
- webpack搭建的vue-cli项目如何使用sass?
- 详解如何将 Vue-cli 改造成支持多页面的 history 模式
- 使用Vue-cli搭建多页面应用时对项目结构和配置的调整
- vue-cli脚手架搭建
- 如何在页面中加入天气
- 使用Vue-cli搭建后台简单管理系统vue.js2.0
- mac 下如何建立vue-cli项目
- 用vue-cli 与vuex一步一步搭建一个笔记应用(四)
- vue-cli 脚手架搭建
- vue-cli 的搭建
- vue+webpack+vue-cli+WebStrom 项目搭建
- 如何向3D Slicer (version 4)中加入CLI插件