安装
npm install vue-router --save
使用实例
vue-router初使用（webpack-simple模板）
1、切换到指定目录，执行命令（使用 vue 命令的需要安装 vue-cli ，点击查看如何安装）：
vue init webpack-simple
2、安装 vue-router ：
npm install vue-router
3、运行：
npm install
npm run dev
4、在 src 下创建名为 components 的文件夹，并在其下新建如下三个简单组件：
<template>
<div>
<h1>首页</h1>
</div>
</template>
<script>
export default{}
</script>
VMain.vue
<template>
<div>
<h1>列表页</h1>
</div>
</template>
<script>
export default{}
</script>
VList.vue
<template>
<div>
<h1>详细页</h1>
</div>
</template>
<script>
export default{}
</script>
VDetail.vue
5、修改 App.vue 文件，使用 router-link 标签：
<template>
<div id="app">
<ul>
<li>
<router-link to='/'>主页</router-link>
</li>
<li>
<router-link to='/list'>列表页</router-link>
</li>
<li>
<router-link to='/detail'>详细页</router-link>
</li>
</ul>
<router-view/>
</div>
</template> <script>
export default {
data () {
return {
}
}
}
</script> <style> </style>
App.vue
6、配置路由：
import Vue from 'vue'
import App from './App.vue' import VueRouter from 'vue-router' import VMain from './components/VMain'
import VList from './components/VList'
import VDetail from './components/VDetail' Vue.use(VueRouter); const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: VMain },
{ path: '/list', component: VList },
{ path: '/detail', component: VDetail }
]
}); new Vue({
el: '#app',
router,
render: h => h(App)
})
main.js
7、效果：
支持markdown语法笔记小网站实例（webpack模板）
1、初始化目录。
vue init webpack
2、安装依赖包 。
"axios": "^0.18.0",
"bootstrap": "^3.3.7",
"marked": "^0.5.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
3、模块编写。
<template>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li @click='select(index)' :class="{active:index==currentIndex}" v-for='(item,index) in routes'>
<router-link :to='item.path'>{{item.title}}</router-link>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
routes: [
{ path: '/', title: '首页' },
{ path: '/note', title: '我的笔记' },
]
}
},
methods: {
select(index) {
this.currentIndex = index;
}
},
created() {
// 刷新保持超链接激活的状态
for (var i = 0; i < this.routes.length; i++) {
// this.$route.path 可以获取当前地址信息
if (this.routes[i].path == this.$route.path) {
this.currentIndex = i;
break;
}
}
}
}
</script>
<style></style>
/components/Vheader.vue
<template>
<div class="main">
<h1>{{msg}}</h1>
</div>
</template> <script>
export default {
name: 'Vmain',
data () {
return {
msg:"这是首页"
}
}
}
</script> <style scoped> </style>
/components/Vmain.vue
<template>
<div class='note'>
<div class="row">
<div class="col-md-2">
<VnoteList></VnoteList>
</div>
<div class="col-md-9">
<div class="row">
<VnoteTitle></VnoteTitle>
</div>
<div class="row">
<VnoteBody></VnoteBody>
</div>
</div>
</div>
</div>
</template>
<script>
import VnoteList from '@/components/VnoteList'
import VnoteTitle from '@/components/VnoteTitle'
import VnoteBody from '@/components/VnoteBody'
export default {
data() {
return {}
},
components: {
VnoteList,
VnoteTitle,
VnoteBody
}
} </script>
<style>
</style>
/components/Vnote.vue
<template>
<div class="panel panel-primary">
<div class="panel-body">
<div class="row">
<div class="col-md-4">
<VnoteEditContent></VnoteEditContent>
</div>
<div class="col-md-8">
<VnoteMarkedContent></VnoteMarkedContent>
</div>
</div>
</div>
</div>
</template>
<script>
import VnoteEditContent from '@/components/VnoteEditContent'
import VnoteMarkedContent from '@/components/VnoteMarkedContent'
export default {
data() {
return {}
},
components: {
VnoteEditContent,
VnoteMarkedContent
}
} </script>
/components/Vbody.vue
<template>
<div class="panel panel-primary">
<div class="panel-heading">
编辑内容
</div>
<div class="panel-body" style='height: 855px;'>
<textarea v-model='markedContentHandler' class="form-control" rows="38">
</textarea>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
computed: {
markedContentHandler: {
get() {
return this.$store.state.note.markedContent;
},
set(newVal) {
this.$store.state.note.markedContent = newVal;
}
}
}
} </script>
/components/VnoteEditContent.vue
<template>
<div class="panel panel-info">
<div class="panel-heading">
{{title}}
</div>
<div class="panel-body" style="height: 1050px;">
<div class="list-group">
<a href="javascript:" :class='{active:item.id==activeItem}' @click='selectNote(item.id)' v-for='(item,index) in changedList' class="list-group-item">
<h4 class="list-group-item-heading">{{item.title}}</h4>
<p class="list-group-item-text">{{item.content.length>20?item.content.substr(0,20)+'...':item.content}}</p>
</a>
<a href="javascript:"class="list-group-item" :class='{active:isNewNote}' @click='newNoteFunc'>
<h4 class="list-group-item-heading">新笔记</h4>
<p class="list-group-item-text">创建你的新笔记</p>
</a>
</div>
<button v-if="isShowDeleteBtn" @click='deleteNote' class="btn btn-danger pull-right">删除选中</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
title: "笔记列表",
newNote: false
}
},
methods: {
selectNote(id) {
this.newNote = false;
this.$store.state.note.id = id;
let _this = this;
this.axios.request({
url: `http://localhost:8000/notes/${id}/`,
method: 'get',
}).then(function(resp) {
_this.$store.state.note = resp.data;
})
},
newNoteFunc() {
this.newNote = true;
this.$store.commit('clearData');
},
deleteNote(){
let _this = this;
let id = this.$store.state.note.id;
this.axios.request({
url: `http://localhost:8000/notes/${id}/`,
method: 'delete',
}).then(function(resp) {
alert('删除成功');
_this.$store.commit('showList');
}) }
},
computed: {
changedList() {
return this.$store.state.list;
},
activeItem() {
return this.$store.state.note.id;
},
isNewNote() {
return this.newNote;
},
isShowDeleteBtn(){
return this.$store.state.note.id != 0;
}
}
} </script>
/components/VnoteList.vue
<template>
<div class="panel panel-info">
<div class="panel-heading">
显示区
</div>
<div class="panel-body" v-html='markedContent' id='showContent' style='height: 855px;word-wrap:break-word;
word-break:break-all;
overflow: hidden;
overflow-y: auto;'>
</div>
</div>
</template>
<script>
import marked from 'marked'
export default {
data() {
return {}
},
computed: {
markedContent() {
return marked(this.$store.state.note.markedContent);
}
}
} </script>
/components/VnoteMarkedContent.vue
<template>
<div class="panel panel-danger">
<div class="panel-heading">
{{titleMsg}}
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-10">
<div class="form-group">
<input type="text" class="form-control" v-model='titleHander' placeholder="标题">
</div>
</div>
<div class="col-md-2"><button class="btn btn-primary" @click='submitNote'>{{optionStr}}</button></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
titleMsg: "笔记标题",
}
},
methods:{
submitNote(){
this.$store.state.note.content = document.getElementById('showContent').innerText;
this.$store.commit('submitNote');
}
},
computed:{
titleHander:{
get(){
return this.$store.state.note.title;
},
set(newVal){
this.$store.state.note.title = newVal;
}
},
optionStr(){
return this.$store.state.note.id == 0?'保存':'更新';
}
}
} </script>
/components/VnoteTitle.vue
4、路由配置。
import Vue from 'vue'
import Router from 'vue-router'
import Vmain from '@/components/Vmain'
import Vnote from '@/components/Vnote' Vue.use(Router) export default new Router({
mode: 'history',
routes: [{
path: '/',
component: Vmain
}, {
path: '/note',
component: Vnote
}]
})
/router/index.js
<template>
<div id="app">
<Vheader></Vheader>
<router-view />
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import Vheader from '@/components/Vheader' export default {
name: 'App',
components: {
Vheader
}
}
</script>
<style>
</style>
/App.vue
5、依赖引入。
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import axios from 'axios'
import Qs from 'qs'
Vue.config.productionTip = false;
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs
Vue.use(Vuex); const store = new Vuex.Store({
state: {
note: {
id: 0,
title: '',
content: '',
markedContent: ''
},
list:null
},
mutations: {
submitNote(state) {
let _this = this;
let _url = 'http://127.0.0.1:8000/notes/';
axios.request({
url: state.note.id == 0 ? _url : `${_url}${state.note.id}/`,
data: Qs.stringify(state.note),
method: state.note.id == 0 ? 'post' : 'put'
})
.then(function(res) {
_this.commit('showList');
})
.catch(function(err) {
if (err.response) {
console.log(err.response);
}
})
console.info(state.note)
},
showList(state) {
axios.get('http://127.0.0.1:8000/notes/').then(function(res) {
store.state.list = res.data;
})
.catch(function(err) {
if (err.response) {
console.log(err.response)
}
})
},
clearData(state) {
state.note = {
id: 0,
title: '',
content: '',
markedContent: ''
};
}
}
}); /* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
mounted() {
store.commit('showList')
}
})
/main.js
6、效果图：
7、完整示例点击下载（提取码： 7vvk ），包含前后端程序，此处后端使用 django rest framework 框架。
相关链接：vue-cookies使用