深入理解vue2.0路由如何配置问题
灿尔哈擦苏 人气: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
}
]
})
接下来就是在每一个模块文件中加入这样的一句话暴露出去：
<script>
export default {
name: 'about' ---自定义模块名字
}
</script>
在app中我们可以这样写：
<template>
<div id="app1" class="pagebox">
<div style="clear:both;"></div>
<ul class="index-tap">
<li><router-link to="/main">首页<p></p></router-link></li>
<li><router-link to="/about">关于我们<p></p></router-link></li>
<li><router-link to="/products">产品专区<p></p></router-link></li>
<li><router-link to="/news">新闻资讯<p></p></router-link></li>
</ul>
<ul class="index-tap">
<li><router-link to="/company">企业风采<p></p></router-link></li>
<li><router-link to="/join">招商加盟<p></p></router-link></li>
<li><router-link to="/connect">联系我们<p></p></router-link></li>
<li><router-link to="/brand">品牌介绍<p></p></router-link></li>
</ul>
<div style="clear:both;"></div>
<router-view transition transition-mode="out-in"></router-view>
<div style="clear:both;"></div>
<ul class="index-footer clearx">
<li v-on:click="showph = !showph">电话</li>
<li v-on:click="showmap = !showmap">地图</li>
<li v-on:click="showd = !showd">分享</li>
<!-- JiaThis Button BEGIN -->
<transition name="slide-fade">
<div class="jiathis_style_32x32 share" v-show="showd">
<a class="jiathis_button_qzone"></a>
<a class="jiathis_button_tsina"></a>
<a class="jiathis_button_tqq"></a>
<a class="jiathis_button_weixin"></a>
<a class="jiathis_button_renren"></a>
</div>
</transition>
<!-- JiaThis Button END -->
<transition name="slide-fade">
<div class="share sharephone" v-show="showph">
18305452462
</div>
</transition>
<transition name="slide-fade">
<div class="share showmap" v-show="showmap">
<ditu><https://img.qb5200.com/download-x/ditu>---------------------------------自定义模板
</div>
</transition>
</ul>
<div class="fuceng" v-if="showmap"></div>
</div>
</template>
<script>
import ditu from '@/components/home'
export default {
name: 'app',
data () {
return {
search: '',
showd: false,
showph: false,
showmap: false
}
},
mounted () {
this.init()
},
methods: {
Search () {
if (this.search !== '') {
this.$router.push({
path: '/list',
query: {
serInfo: this.search
}
})
} else {
alert('请输入搜索内容')
}
},
init: function () {
let url = 'http://v3.jiathis.com/code/jia.js'
let script = document.createElement('script')
script.setAttribute('src', url)
document.getElementsByTagName('head')[0].appendChild(script)
}
},
components: {
ditu
}
}
</script>
加载全部内容