[TOC]
#### 1.定義一下單頁面路由
注意:需要引入 Vue-roter.js
<div id="hdcms">
<router-link to="/hdphp">HDPHP</router-link>
<router-link to="/hdcms">HDCMS</router-link>
<router-view></router-view>
</div>
<script>
const hdphp={
template:'<h1>hdphp</h1>'
}
const hdcms={
template:'<h1>hdcms</h1>'
}
let routes=[
{path:'/hdphp',component:hdphp},
{path:'/hdcms',component:hdcms},
];
//要把組件交給路由器
let router = new VueRouter({routes:routes});
new Vue({
el: '#hdcms',
router:router
});
</script>
#### 2.vue-router之路由參數的隨意設置與偽靜態鏈接地址處理
注意:需要引入 Vue-roter.js
<div id="hdcms">
<router-link to="/content">內容 </router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
cid:{{$route.params.cid}} - id:{{$route.params.id}}
<br>
<button @click="show">檢測參數</button>
</div>
</script>
<script>
const content={
template:'#content',
methods:{
show(){
console.log(this.$route.params);
}
}
}
let routes=[
{path:'/content-:cid-show-:id.html',component:content},
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 3.vue-router之路由參數的驗證處理保存路由安全
注意:需要引入 Vue-roter.js
<div id="hdcms">
<router-link to="/content">內容 </router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
id:{{$route.params.id}}
<br>
<button @click="show">檢測參數</button>
</div>
</script>
<script>
const content={
template:'#content',
methods:{
show(){
console.log(this.$route.params);
}
}
}
let routes=[
{path:'/content/:id(\\d{2})',component:content},
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 4.vue-router之路由參數默認值的設置技巧
注意:需要引入 Vue-roter.js
<div id="hdcms">
<router-link to="/content">內容</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="content">
<div>
id:{{id}}
<button @click="show">檢測參數</button>
</div>
</script>
<script>
const content = {
template: '#content',
data(){
return {
id: 0
}
},
mounted(){
this.id = this.$route.params.id;
if (!this.id) {
this.id = 1;
}
},
methods: {
show(){
console.log(this.$route.params);
}
}
}
let routes = [
{path: '/content/:id?', component: content},
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 5.vue-router之實例操作新聞列表單頁面應用與路由別名的使用
注意:需要引入 Vue-roter.js
<div id="hdcms">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<router-link to="/">返回首頁</router-link>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP開源免費框架',content:'這是內容....'},
{id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
mounted(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id', component: content,name:'content'},
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 6.Vue-router之路由嵌套在文章系統中的使用方法
注意:需要引入 Vue-roter.js
<div id="hdcms">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
<router-view></router-view>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<router-link to="/">返回首頁</router-link>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP開源免費框架',content:'這是內容....'},
{id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
mounted(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
}
}
let routes = [
{path: '/', component: home,children:[
{path: '/content/:id', component: content,name:'content'},
]},
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 7.Vue-router之使用watch與mounted解決同一組件頁面不刷新數據的問題
<div id="hdcms">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<router-link :to="{name:'content',params:{id:v.id}}">{{v.title}}</router-link>
</li>
<router-view></router-view>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<router-link to="/">返回首頁</router-link>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP開源免費框架',content:'這是內容....'},
{id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
watch:{
'$route'(to,from){
this.load();
}
},
mounted(){
this.load();
},
methods:{
load(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
}
}
}
let routes = [
{path: '/', component: home,children:[
{path: '/content/:id', component: content,name:'content'},
]},
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 8.vue-router之通過程序控制路由跳轉
<div id="hdcms">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<a href="" @click.prevent="go(v.id)">{{v.title}}</a>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<a href="" @click.prevent="back()">返回</a>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP開源免費框架',content:'這是內容....'},
{id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
},
methods:{
go(id){
//寫業務邏輯
// var url = '/content/'+id;
//{name:'content',params:{id:id}}
var url ={path:'/content/'+id}
this.$router.push(url);
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
watch:{
'$route'(to,from){
this.load();
}
},
mounted(){
this.load();
},
methods:{
load(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
},
back(){
this.$router.go(-1);
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id', component: content,name:'content'}
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 9.vue-router之命名視圖的實例講解
<style>
.menu{border:solid 2px #999;padding:10px;display: block;}
.news{float:left;border:solid 1px red;padding:20px;width:300px;}
.slide{float:left;border:solid 1px red;padding:20px;width:300px;}
</style>
<div id="hdcms">
<router-view class="menu"></router-view>
<router-view class="news" name="news"></router-view>
<router-view class="slide" name="slide"></router-view>
</div>
<script type="text/x-template" id="menu">
<div>
<a href="http://houdunren.com">后盾人</a>
<a href="http://www.houdunwang.com">后盾IT教育</a>
</div>
</script>
<script type="text/x-template" id="news">
<div>
<li v-for="v in news">{{v.title}}</li>
</div>
</script>
<script type="text/x-template" id="slide">
<div>
<li v-for="v in data">{{v.title}}</li>
</div>
</script>
<script>
const menu = {
template: '#menu',
}
const news = {
template: '#news',
data(){
return {
news:[
{title:'houdunren.com'},
{title:'hdphp.com'},
]
}
}
}
const slide = {
template: '#slide',
data(){
return {
data:[
{title:'后盾人'},
{title:'后盾PHP培訓'},
]
}
}
}
let routes = [
{
path: '/', components: {
default: menu,
news: news,
slide: slide
}
},
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 10.vue-router之重定向redirect的使用技巧
<div id="hdcms">
<router-link to="/">首頁</router-link>
<a href="http://www.houdunwang.com">后盾人</a>
<router-link to="/about">關于我們</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<a href="" @click.prevent="go(v.id)">{{v.title}}</a>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<a href="" @click.prevent="back()">返回</a>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP開源免費框架',content:'這是內容....'},
{id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'},
{id:3,title:'關于我們',content:'一個認真錄制視頻教程的有激情的團隊!!!!'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
},
methods:{
go(id){
//寫業務邏輯
// var url = '/content/'+id;
//{name:'content',params:{id:id}}
var url ={path:'/content/'+id}
this.$router.push(url);
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
watch:{
'$route'(to,from){
this.load();
}
},
mounted(){
this.load();
},
methods:{
load(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
},
back(){
this.$router.go(-1);
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id', component: content,name:'content'},
{path: '/about', redirect:{name:'content',params:{id:3}}}
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 11.vue-router之使用路由別名定制URL
<div id="hdcms">
<router-link to="/">首頁</router-link>
<a href="http://www.houdunwang.com">后盾人</a>
<router-link to="/about">關于我們</router-link>
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<a href="" @click.prevent="go(v.id)">{{v.title}}</a>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<a href="" @click.prevent="back()">返回</a>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP開源免費框架',content:'這是內容....'},
{id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'},
{id:3,title:'關于我們',content:'一個認真錄制視頻教程的有激情的團隊!!!!'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
},
methods:{
go(id){
//寫業務邏輯
// var url = '/content/'+id;
//{name:'content',params:{id:id}}
var url ={path:'/content/'+id}
this.$router.push(url);
}
}
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
watch:{
'$route'(to,from){
this.load();
}
},
mounted(){
this.load();
},
methods:{
load(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
},
back(){
this.$router.go(-1);
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id', component: content,name:'content'},
{path: '/content/3', alias:['/about']},
{path: '/content/2', alias:['/hdphp']}
];
//要把組件交給路由器
let router = new VueRouter({routes});
new Vue({
el: '#hdcms',
router
});
</script>
#### 12.vue-router之使用html5history模式去除hash錨點生成優雅的url
1.創建..htaccess
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
<div id="hdcms">
<router-view></router-view>
</div>
<script type="text/x-template" id="home">
<div>
<li v-for="v in news">
<a href="" @click.prevent="go(v.id)">{{v.title}}</a>
</li>
</div>
</script>
<script type="text/x-template" id="content">
<div>
<h1>{{field.title}}-{{field.id}}</h1>
<p>
{{field.content}}
</p>
<a href="" @click.prevent="back()">返回</a>
</div>
</script>
<script>
var data = [
{id:1,title:'HDPHP開源免費框架',content:'這是內容....'},
{id:2,title:'HDCMS內容管理系統',content:'這是HDCMS內容....'}
];
const home = {
template: '#home',
data(){
return {
news:data
}
},
methods:{
go(id){
//寫業務邏輯
// var url = '/content/'+id;
//{name:'content',params:{id:id}}
var url ={path:'/content/'+id+'.html'}
this.$router.push(url);
}
}
}
const NotFound = {
template: '<h1>你請求的頁面不存在</h1>',
}
const content = {
template: '#content',
data(){
return {
field:{}
}
},
watch:{
'$route'(to,from){
this.load();
}
},
mounted(){
this.load();
},
methods:{
load(){
var id =this.$route.params.id;
for(let k=0;k<data.length;k++){
if(data[k].id==id){
this.field = data[k];
}
}
},
back(){
this.$router.go(-1);
}
}
}
let routes = [
{path: '/', component: home},
{path: '/content/:id.html', component: content,name:'content'},
{path: '*', component: NotFound},
];
//要把組件交給路由器
let router = new VueRouter({
mode:'history',
routes
});
new Vue({
el: '#hdcms',
router
});
</script>
- html&jquery網頁特效
- 標簽分類及特點
- 關于文字標簽
- 網頁定時跳轉
- css透明度和插件
- 0.前端常用工具
- 1.tab切換效果
- 2.tab切換效果多個代碼復用
- 3.百度新聞導航條效果
- 4.解決鼠標移入過快的問題
- 5.滾動條位置
- 6.元素尺寸
- 7.全選反選操作
- 8.固定定位
- 9.開關效果
- 10.節點操作
- 11.仿小米商品展示效果
- 12.仿小米商品展示效果復用
- 13.固定導航欄效果
- 14.凡客輪播圖效果
- 15.頂部下滑廣告效果
- 16.京東左右滑動輪播圖
- 17.京東左右滑動無縫輪播圖
- 18.選擇器
- 19.篩選
- 20.開關效果
- 21.滑動效果
- 22.小米商品效果css實現
- 23.元素水平垂直居中
- laravel5.6
- LARAVEL 介紹&安裝
- javascript & css 腳手架
- php常用工具類
- 安裝laravel-ide-helper增強代碼提示
- 使用migration創建表和數據填充
- 解決mysql5.7以下laravel不能執行數據遷移的問題
- 路由
- 登陸操作自定義模型
- 使用中間件middleware進行登錄權限驗證
- 進行表單驗證處理
- 使用laracasts-flash定制消息提示
- 資源路由
- 寶塔面板安裝fileinfo擴展
- laravel上傳處理與使用hdjs快速實現前端上傳組件
- thinkphp
- phpstorm
- phpstorm安裝插件
- 定義快捷鍵
- 關閉提示
- 將代碼實時同步到遠程服務器
- sublime
- composer
- git使用
- git安裝和配置作者信息
- git新建項目和維護項目
- git日志操作
- git別名操作
- git分支操作
- git生成發布壓縮包
- git系統別名
- gitrebase操作
- 使用SSH與GITHUB遠程服務器進行無密碼連接
- 本地版本庫主動使用remote與遠程GITHUB進行關聯
- 本地分支與GITHUB遠程分支同步
- 項目實戰-新入職員工參與項目開發時分支使用
- 自動部署
- ios開發
- linux
- 1.centos6.5 mysql忘記登入密碼
- html5
- 標簽
- 表單
- 音頻與視頻
- webstorage儲存
- canvas
- css3
- 01.CSS3布局
- 02.transition動畫
- 03.animation動畫
- 04.flex彈性盒模型
- Less
- gulpjs
- es6
- ES6模塊化
- let和const命令
- ES6函數擴展&解構賦值
- JavaScript之數據遍歷
- class類
- Set和Map數據結構
- Vue
- 1.創建第一個應用
- 2.屬性動態綁定
- 3.表達式
- 4.解決phpstorm不識別ECMASCRIPT6語法的問題
- 5.watch監聽屬性
- 6.使用object與array控制class
- 7.條件渲染
- 8.循環
- 9.變異方法
- 10.事件
- 11.表單
- 12.組件
- 13.css過渡動
- 14.js庫控制vue過渡動作
- 15.自定義指令directive
- 16.使用vue-cli初始化單頁面應用
- 17.Vue-router路由
- 18.vuex
- 19.vue-cli
- webpack
- zanui
- nodejs