Vue路由基本功能 demo

阿新 • • 發佈：2018-12-12

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
		<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
	</head>
	<body> 

		<div id="app"></div>


		<script>
			//安裝路由外掛
			Vue.use(VueRouter);

			//定義(路由)元件
			var Home = {
				props: ['stu'],
				template: `
					<transition name="slide">
						<div>
							<h1>{{ $route.meta.title}}</h1>
							<!-- $route.params.stu 從路由解耦 -->
							<p> {{ stu }}</p>
						</div>
					</transition>
				` 

			};
			var HomeA = {
				props: ['stu'],
				template: '<p>HomeA {{ stu }}</p>'
			};
			var HomeB = {
				props: ['stu'],
				template: '<p>HomeB {{ stu }}</p>'
			};
			var About = {
				template: `
					<div>
							<h1>{{ $route.meta.title}}</h1>
							<p>{{ $route.params.id }}</p>
							<!--這裡的About頁面是被渲染的元件，同樣也可以包含自己的渲染 -->
							<router-view></router-view>
							<router-view name="aboutA1"></router-view>
					</div>
				` 

			};
			var AboutA = {
				template: '<p>我是關於 AboutA </p>'
			};
			var AboutA1 = {
				template: '<p>我是關於 頁面的巢狀命名檢視展示 </p>'
			};
			var AboutB = {
				template: '<p>我是關於 AboutB </p>'
			}
			var NotFound = {
				template: '<p>Not Found Page</p>'
			};
			var routes = [
				{
					path: '/:stu',
					components: { <!-- 加上 s -->
						default: Home,
						homeA: HomeA,
						homeB: HomeB
					},
					// 對於包含命名檢視的路由，你必須分別為每個命名檢視新增 `props` 選項：
					props: {
						default: true,
						homeA: true,
						homeB: false
					},
					name: 'home',
					meta: {
						title: '首頁'
					}
				},
				{
					path: '/about/:id',
					component: About,
					meta: {
						title: '關於'
					},
					children: [{
							// 當 /about/:id/a 匹配成功，
							// AboutA 會被渲染在 About 的 <router-view> 中
							path: 'a',
							components: { <!-- 巢狀命名檢視 -->
								default: AboutA,
								aboutA1: AboutA1
							},
							meta: {
								title: 'AboutA'
							}
						},
						{
							// 當 /about/:id/b 匹配成功
							// AboutB 會被渲染在 About 的 <router-view> 中
							path: 'b',
							component: AboutB,
							meta: {
								title: 'AboutB'
							}
						}
					]
				},
				{
					path:'/notFound',
					component:NotFound
				}
			];

			//對映路由
			var router = new VueRouter({
				routes: routes
			});
			//全域性路由改變前鉤子
			router.beforeEach(function(to, from, next) {
				if (to.matched.length === 0) { //匹配前往的路由不存在
					 next('/notFound');
				} else {

					//meta 資料並不是只讀的，我們可以在程式碼中根據需求動態地改變它。
					//例如：this.$route.meta.title = "還是首頁";
					window.document.title = to.meta.title;

					next();
				}

			});
			var app = {
				data: function() {
					return {
						
					}
				},
				template: `
					<div>
						<h1>Hello App!</h1>
						<button @click="$router.push('/about/aaaaaaa')">程式設計式的導航</button>
						<button @click="$router.go(-1)">後退</button>
						<button @click="$router.go(1)">前進</button>
					  <p>
							<!-- 使用 router-link 元件來導航. -->
							<!-- 通過傳入 to 屬性指定連結. -->
							<!-- <router-link> 預設會被渲染成一個 <a> 標籤 -->
							<router-link :to="{name:'home',params:{stu:'李四'}}">首頁</router-link>
							<router-link to="/about/aaaaaaa">關於</router-link>
							<router-link to="/about/aaaaaaa/a">關於 內的route頁面a</router-link>
							<router-link to="/about/bbbbbbbb/b">關於 內的route頁面b</router-link>
					  </p>
						
							<!-- 路由匹配到的元件將渲染在這裡 -->
							<router-view></router-view>
							<!-- 命名檢視。有時候想一個頁面展示多個檢視，而不是巢狀展示 -->
							<router-view name="homeA"></router-view>
							<router-view name="homeB"></router-view>
						
					</div>
				`
			};
			new Vue({
				el: '#app',
				data: function() {
					return {

					}
				},
				router: router, //掛載路由配置
				components: {
					"app": app
				},
				template: '<app/>'
			});
		</script>
	</body>
</html>

demo按照vue官網搭建的demo
效果展示：
在這裡插入圖片描述

Vue路由基本功能 demo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.boot

Vue 路由基本使用方法

tps pla router view 格式 inf 會有 highlight all 1、安裝安裝Vue-route有倆種方法： 1.1 直接引入 <script src="vue.js"></script> <script src="v

vue路由元之進入路由需要用戶登錄權限功能

BE 使用配置 rec AC 判斷需要 spa redirect 為什麽需要路由元呢？？？　　博豬最近開發剛剛好遇到一個情況，就是有個路由頁面裏面包含了客戶的信息，客戶想進這個路由頁面的話，就可以通過請求數據獲取該信息，但是如果客戶沒有登錄的話，是不能進到該頁面的，

nginx----------前端寫了一套帶有vue路由的的功能。放到nginx配置的目錄下以後，刷新會報404未找到。

HA index chat .html nginx配置 files activit nginx hat 1、　　這是根據實際情況來寫的。　　location /h5/activity/wechat/ { index index.html inde

Vue路由的基本使用

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet"

vue 路由的基本使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.

vue路由跳轉傳引數demo

vue中路由跳轉傳引數有多種,自己常用的是下面的幾種通過router-link進行跳轉通過程式設計導航進行路由跳轉 1. router-link <router-link

Vue——路由定義及基本使用

Vue.use(VueRouter) /**定義路由**/ const routes = [ { path: '/', component: login }, {

vue路由+子路由+具名路由demo例項(結合animate.css動畫)

const Index = { template:"#index" } const List = { template:"#list", data(){

Knative 基本功能深入剖析：Knative Serving 之服務路由管理

導讀：本文主要圍繞 Knative Service 域名展開，介紹了 Knative Service 的路由管理。文章首先介紹瞭如何修改預設主域名，緊接著深入一層介紹瞭如何新增自定義域名以及如何根據 path 關聯到不同的 Knative Service

PyQt4 模擬記事本基本功能（保存，打開文件）

int .sh idt img 問題 top 我們文件 pyqt 1. 默認【保存】按鈕enable 2. 修改文本的內容後，【enable】 3. 解決字符亂碼問題：utf-8 # -*- coding: utf-8 -*- import sys from PyQt

Spring基本功能詳解

tex factor oid out 負責 sch bsp 初始化 pub 一、SpringIOC 　　Spring的控制反轉：把對象的創建，初始化，銷毀的過程交給SpringIOC容器來做，由Spring容器控制對象的生命周期。　　1.1 啟動Spring容器的方式：

【路由達人】簡單兩步搞定小米路由新增功能-DDNS（解析域名地址轉向在線工具）

固定ip cells hot ddn mic width cin spa family DDNS（Dynamic Domain Name Server）是動態域名服務的縮寫！簡單來說目前ISP大多為我們提供動態IP（如ADSL撥號上網），而很多設備或服務需要通過遠

shell-3.bash的基本功能

cnblogs image ash com .com 基本功分享 bsp ima shell-3.bash的基本功能

一款線程安全、基本功能齊全的STL

叠代器通過指針 left nis min nbsp align github 　MiniSTL 　　目前正在完成一個STL，主要想通過該項目鍛煉C++編程、模板編程、熟悉STL、鍛煉數據結構和算法能力。　　項目的目標是實現STL的幾大構件+線程安全。項目過程中主要

一個httpClient 的基本功能

esp exce hand req build exceptio process exe lin Request execution 　　build request 　　process response 　　message headers 　　process entries

vue-路由-多層

path tail view -s document name div ctype out <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

vue 路由

path export pre one use name 頁面 out fault 1、在 src/router/index.js 裏定義新的路由數據 import Vue from ‘vue‘ import Router from ‘vue-router‘ import

Spring基本功能-掃描與繼承

ext -s bsp 增加 sim 命名空間 bean tex 數據　一、Spring的掃描　　　　一個稍大的項目中，可能會有成百上千個bean，此時采用xml的配置形式註入bean，一方面是配置文件顯得十分龐大，另一方面也會導致後期的維護難度增加，為此，Sprin

利用python數據分析panda學習筆記之基本功能

數據分析 method 入行整數 -s cnblogs 3.4 style fill 1 重新生成索引如果某個索引值不存在就引入缺失值 1 from pandas import Series,DataFrame 2 import pandas as pd 3 im

Vue路由基本功能 demo

相關推薦