route 嵌套路由实例

中文文档：https://router.vuejs.org/zh/

route 嵌套路由实例,可直接运行，参考教程：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/index.js"></script>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<style>
			/*grid布局请看:https://blog.csdn.net/ceshi986745/article/details/51733383*/
			.us {
			  display: grid;
			  grid-template-columns: auto 1fr;
			  grid-template-rows: auto;
			  grid-template-areas: 
			    "header header"
			    "nav content"
			    "nav helper"
			    ;
			}
			
			h2 {
			  grid-area: header;
			}
			
			.us__nav {
			  grid-area: nav;
			  border: 1px dotted;
			  margin-right: .75rem;
			  padding: .3rem;
			}
			.us__content {
			  grid-area: content;
			}
			.us__content--helper {
			  grid-area: helper;
			}
		</style>
	</head>
	<body>
		<div id="app">
		  <h1>默认header</h1>
		   <!--渲染路径匹配到的视图组件-->
		  <router-view></router-view>
		</div>
	</body>
	<script>
			const leftBox = {
				template: 
				`
				<div class="us__nav">
				  <router-link to="/settings/content">栏目一</router-link>
				  <br>
				  <router-link to="/settings/list">栏目二</router-link>
				</div>
				`
			}
			const box = {
				template: 
				`
				<div class="us">
				  <h2>**公司,**系统</h2>
				  <leftBox/>
				  <!--渲染路径匹配到的视图组件-->
				  <router-view class ="us__content"/>
				  <router-view name="helper" class="us__content us__content--helper"/>
				</div>
				 `,
			  	components: { leftBox }
			}
			const content = {
				template:
				 `
				<div>
					<h3>详情</h3>
				</div>
				  `
			}
			
			const row = {
				template: 
				 `
				<div>
					<h3>上</h3>
				</div>
				  `
				}
			
			const helper = {
				template:
				 `
				<div>
					<h3>下</h3>
				</div>
				 `
			}
			
			const router = new VueRouter({
			  routes: [
			    { path: '/settings',
			      // You could also have named views at tho top
			      component: box,
			      //嵌套路由
			      children: [{
			      	path: 'content',
			        component: content
			      }, {
			      	path: 'list',
			        components: {
			        	default: row,
			            helper: helper
			        }
			      }]
			    }
			  ]
			})
			/*除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现:router.push(location, onComplete?, onAbort?)

			注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

			声明式	
			<router-link :to="...">	
			编程式
			router.push(...)*/
			router.push('/settings/content')
			new Vue({
				router,
			  el: '#app'
			})

	</script>
</html>

index.js(移动端适应:rem),直接贴出来吧，想必做过H5的朋友都知道:

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  //获得屏幕的大小
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10 /*获得客户端的宽度*/
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // 重新调整pagesize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // 检测0.5px的支持
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

route 嵌套路由实例

猜你喜欢