vue系列文章（19）vue路由配置

vue路由配置相当重要，可以参考官方的路由文档。https://router.vuejs.org/zh/

首先需要在我们的项目中安装路由模块

npm install vue-router --save-dev

安装以后我们就可以在我们的项目中引用vueRouter

首先在main.js中引入下面的配置

import VueRouter from 'vue-router'

Vue.use(VueRouter)

再进行配置路由模块

const router = new VueRouter({

routes:[

{path: "/",component: Home},

{path: "/helloworld",component: Helloworld}

],

mode: "history"

//引入这个属性的意思是浏览器的连接不需要加入“#”号即可，如localhost:8080/hello,而非localhost:8080/#/hello

})

在newVue中引入router

new Vue({

router,

el: '#app',

components: { App },

template: '<App/>'

})

 

 

<router-view></router-view>作用是

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

<router-view></router-view>

router-link 的作用类似于a标签的作用。

<li><router-link to="/">home</router-link></li>

   Vue系列文章目录 

1. vue系列文章（1）：对象绑定，属性绑定
2. Vue系列文章（2）事件绑定，鼠标点击事件
3. vue系列文章（3）：事件修饰符
4. Vue系列文章（4）键盘事件及键盘修饰符
5. vue系列文章（5）双向数据绑定
6. vue系列文章（6）计算属性computed
7. vue系列文章（7）动态CSS类型绑定
8. vue系列文章（8）条件渲染
9. vue系列文章（9）v-for条件循环
10. vue系列文章（10）vue实战项目demo
11. vue系列文章(11)：初始化多个实例对象
12. vue系列文章（12）初始组件的应用
13. Vue系列文章（13）vue cli脚手架
14. vue系列文章（14）vue-cli脚手架，组件嵌套，全局组件注册和局部组件注册
15. vue系列文章（15）属性传值props
16. vue系列文章（16）传值和传引用的类型和区别
17. vue系列文章（17）利用事件传递将子组件值传递给父组件
18. vue系列文章（18）vue生命周期
19. vue系列文章（19）vue路由配置
20. vue系列文章（20） vue网络请求vue-resource

 如果上面文章对你有用，打赏下我吧@*@