I have learned this in the past two days. I feel that there are a lot of knowledge points in the routing place and it is very important, so I will add a little note today.
After the basic hand scaffolding of the project is built, a router folder is built and a file is configured.
File content:
npm install vue-router vue-resource --save-dev (install vue routing module vue-router and network request module vue-resource)
import Vue from 'vue'
import Router from 'vue-router' （----Introduce routing---Notes）
import About from '@/components/about'（--What needs to be introduced iscomponentsSome templates created under the folder---Relative path----aboutRepresentative module）
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'
(Router) （--use---）
export default new Router({
routes: [
{
path: '/main',
name: 'main',
component: Main
},--------------------------------
{ path: '/', Here is the route redirection，For example, when the page is loaded, enter the home page
redirect: '/main' （For example, give the route a selected style as red Then it can be used here---.router-link-active{style}）
},---------------------------------
{---------------------Here is the configuration subroutine
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
}
]
})
Next, add a sentence like this to each module file and expose it:
<script>
export default {
name: 'about' ---Custom module name
}
</script>
In the app we can write this:
<template>
<div class="pagebox">
<div style="clear:both;"></div>
<ul class="index-tap">
<li><router-link to="/main">front page<p></p></router-link></li>
<li><router-link to="/about">about Us<p></p></router-link></li>
<li><router-link to="/products">Product area<p></p></router-link></li>
<li><router-link to="/news">News<p></p></router-link></li>
</ul>
<ul class="index-tap">
<li><router-link to="/company">Corporate style<p></p></router-link></li>
<li><router-link to="/join">Join the investment<p></p></router-link></li>
<li><router-link to="/connect">Contact Us<p></p></router-link></li>
<li><router-link to="/brand">Brand introduction<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">Telephone</li>
<li v-on:click="showmap = !showmap">map</li>
<li v-on:click="showd = !showd">share</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></ditu>---------------------------------Custom templates
</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 () {
()
},
methods: {
Search () {
if ( !== '') {
this.$({
path: '/list',
query: {
serInfo:
}
})
} else {
alert('Please enter the search content')
}
},
init: function () {
let url = '/code/'
let script = ('script')
('src', url)
('head')[0].appendChild(script)
}
},
components: {
ditu
}
}
</script>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.