vue2.0配置路由 - gogo0

配置路由之前，先检查vue版本，（案例适用vue2.0）

采用npm包的形式进行安装。

安装路由依赖：npm install vue-router（代码中，如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能）

更新一下 vue-cli：npm update vue-cli

一、使用路由
在main.js中，需要明确安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)

1.定义组件，两种方式：

方式(1):从其他文件import进来

import index from './components/index.vue'
import hello from './components/hello.vue'

另一种方式(2)直接在js文件创建组件：如下：

//创建组件

　　var index={
　　　　template:'<h3>我是主页</h3>'
　　};

　　var hello={
　　　　template:'<h3>我是主页</h3>'
　　};

2.定义路由

const routes = [

    { path: '/index', component: index },
    { path: '/hello', component: hello },
]

3.创建 router 实例，然后传 routes 配置

const router = new VueRouter({
  routes
})

4.创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能

const app = new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

经过上面的配置之后呢，路由匹配到的组件将会渲染到App.vue里的<router-view></router-view>

那么这个App.vue里应该这样写：

<template>
  <div id="app">
        <router-view></router-view>      <!-- 路由匹配到的组件将渲染在这里 -->
  </div>
</template>
<router-link to="/goods">主页</router-link>      <!--在vue-router 2中，使用了<router-link></router-link>实现路由跳转-->

index.html里呢要这样写：

<body>
    <div id="app"></div>
</body>

这样就会把渲染出来的页面挂载到这个id为app的div里了。

实例演示：
app.vue 页面代码：

<template>

<router-view></router-view>

</div>

</template>

main.js代码：

//main.js是入口js
import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';//VueRouter是一个变量，

Vue.config.productionTip = false

Vue.use(VueRouter);//如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能

//组件
var Goods={
template:'<h3>我是主页</h3>'
};
//定义路由
const routes = [
{ path: '/goods', component: Goods },

]

//创建 router 实例，然后传 routes 配置
const router = new VueRouter({
routes
})

//创建和挂载根实例。通过 router 配置参数注入路由，从而让整个应用都有路由功能
const app = new Vue({
router,
render: h => h(App)
}).$mount('#app')

嵌套路由：

//  定义路由如下：
const routes = [
   { path: '/', redirect: '/home' },
  　　{ 
   　　  path: '/home', 
   　　  component: Home, 
   　　  children:[
     　　  { path: '/home/login', component: Login},
     　　  { path: '/home/reg', component: Reg}
   　　  ]
  　　},
  { path: '/news', component: News}
]

参考：http://www.jb51.net/article/106326.htm

报错：

router.map is not a function

用的是vue2.0，配置路由时，vue中不识别vue1.0中的map

Cannot read property 'component' of undefined （即vue-router 0.x转化为2.x）

vue项目原本是用0.x版本的vue-router，但是却报出：Cannot read property 'component' of undefined

这是因为版本问题，由于vue2删除了vue1的内部指令，而vue－router1.x依赖vue的一个内部指令


参考：http://www.jianshu.com/p/cb918fe14dc6
　　   http://blog.csdn.net/m0_37754657/article/details/71269988

posted on 2017-09-21 17:09 gogo0 阅读(1587) 评论(0) 收藏举报

刷新页面返回顶部