vue2.0配置路由

时间：2023-03-09 18:30:14
vue2.0配置路由

配置路由之前，先检查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>

<div id="">
<div class="tab-item">
<router-link to="/goods">主页</router-link>
</div>

<!-- <div class="content">content</div>-->

<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

</div>

</template>

<script type="text/javascript">
import header from './components/header/header.vue';
export default{
};
</script>

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.****.net/m0_37754657/article/details/71269988




 
相关文章