VUE路由router（模板公用）

一、定义作用
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）单页面实现了页面的切换，但是不刷新页面，它是通过js实现的
二、实战demo
（1）在用cmd创建项目，在创建项目的时候创建router,打一个yes
（2）在cmd创建好项目；components文件夹下创建apple.vue和banana.vue两个组件 ；main.js和App.vue不用动；
（3）在src/router文件夹下的index.js文件编辑如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'//导入组件
import apple from '@/components/apple'
import banana from '@/components/banana'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/appNews/:typeid', //URL尾部的路径
name: 'appNews',
component: appNews //组件名
},
{
path: '/djgz/:typeid', //URL尾部的路径
name: 'djgz',
component: djgz //组件名
},
{
path: '/apple',
//URL尾部的路径

name: 'apple',
component: apple
//组件名

},
{
path: '/banana',
name: 'HelloWorld',
component: banana
}
]})

（4）在vue文件中引用

<template>
<div id="app">
<img src="./assets/logo.png">
//<!-- 路由部分 -->
<template>
<keep-alive><router-view /></keep-alive> //这个是显示默认的第一个路由的路径
</template>
<router-link :to="{path:'/apple'}">to apple</router-link>
<router-link :to="{path:'/banana'}">to banana</router-link>
</div>
</template>

三、项目中的公用模板（网站中整个项目公用头部尾部，中间部分随着路由变化）
（1）首先在components中建一个layout.vue页面，写好头部尾部，并且在中间写上路由

<div>
这里是公用导航栏
<a class="menu-link"><router-link :to="{ path: '/appNews/38' }">新闻动态</router-link></a>
<a class="menu-link"><router-link :to="{ path: '/djgz/41' }">党团建设</router-link></a>
</div>
<template>
<keep-alive><router-view /></keep-alive> //这个是显示默认的第一个路由的路径
</template>
<div>这里是公用尾部信息</div>

（2）公用主页layout.vue要写在main.js文件中

import Vue from 'vue'
import layout from './components/layout'
import router from './router'
import http from 'axios'
http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
Vue.prototype.$https = http
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { layout },
template: '<layout/>'
})

（3）这样就可以实现在点击导航栏时，中间的路由就会变，实现页面的切换

最后

以上就是迷路太阳为你收集整理的VUE路由router（模板公用）的全部内容，希望文章能够帮你解决VUE路由router（模板公用）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。