深入理解vue2.0路由如何配置问题

深入理解vue2.0路由如何配置问题

这两天学习了vue.js 感觉路由这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。

项目基本手脚架搭建完毕后，建一个router文件夹，里面配置一个index.js文件。

文件内容：

npm install vue-router vue-resource --save-dev（安装 vue 路由模块vue-router和网络请求模块vue-resource）

import Vue from 'vue'

import Router from 'vue-router' （----引入路由---注释说明）

import About from '@/components/about'（--这些需要引入的是components文件夹下面创建的一些模板---相对路径----about代表about.vue模块）

import Home from '@/components/home'

import Brand from '@/components/brand'

import Company from '@/components/company'

import Connect from '@/components/connect'

import Main from '@/components/main'

import Join from '@/components/join'

import News from '@/components/news'

import Products from '@/components/products'

import son1 from '@/components/son1'

import son2 from '@/components/son2'

import list from '@/components/list'

import newList from '@/components/newList'

import culture from '@/components/culture'

import certification from '@/components/certification'

import zhuanjia from '@/components/zhuanjia'

Vue.use(Router) （--使用---）

export default new Router({

routes: [

{

path: '/main',

name: 'main',

component: Main

},--------------------------------

{ path: '/', 这里是路由重定向，比如页面加载时候进入首页

redirect: '/main' （比如给路由一个选中后的样式为红色 那么这里就能用到了---.router-link-active{样式}）

},---------------------------------

{---------------------这里是配置子路由

path: '/brand',

name: 'brand',

component: Brand,

children: [

{

path: '/',

name: 'newList',

component: newList

},

{

path: '/brand/culture',

name: 'culture',

component: culture

},

{

path: '/brand/certification',

name: 'certification',

component: certification

},

{

path: '/brand/zhuanjia',

name: 'zhuanjia',

component: zhuanjia

}

]

},

{

path: '/about',

name: 'about',

component: About

},

{

path: '/company',

name: 'company',

component: Company

},

{

path: '/connect',

name: 'connect',

component: Connect

},

{

path: '/home',

name: 'home',

component: Home

},

{

path: '/join',

name: 'join',

component: Join,

children: [

{

path: '/',

name: 'son1',

component: son1

},

{

path: '/join/son2',

name: 'son2',

component: son2

}

]

},

{

path: '/list',

name: 'list',

component: list

},

{

path: '/news',

name: 'news',

component: News

},

{

path: '/products',

name: 'products',

component: Products

}

]

})

接下来就是在每一个模块文件中加入这样的一句话暴露出去：

在app中我们可以这样写：

18305452462

---------------------------------自定义模板

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。