标签:children char 结合 ESS 直接 outer one initial 对象
安装 vue-router
cnpm i vue-router -S
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <app></app> </div> </body> </html>
main.js
import Vue from ‘vue‘ // 1,导入 vue-router包 import vueRouter from ‘vue-router‘ // 导入app组件 import app from ‘./app.vue‘ // 导入其他组件 import account from ‘./components/account.vue‘ import goodslist from ‘./components/goodslist.vue‘ // 2,手动安装vueRouter Vue.use(vueRouter); // 3,创建路由对象 var router = new vueRouter({ routes : [ // account goodslist { path : ‘/account‘ , component : account}, { path : ‘/goodslist‘ , component : goodslist} ] }) var vm = new Vue({ el : ‘#app‘, render : c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖 // 所以不要把router-view和router-link直接写到 el 所控制的元素中。 router }) // 注意app这个组件是通过vm实例的render函数渲染的,render函数如果要渲染组件 // 渲染出来的组件只能放到el : ‘#app‘ 所指定的元素中去。 // account 和 goodslist组件是通过路由匹配监听到的,所以,这两个组件只能展示到 // 属于路由的<router-view></router-view>中去。
app.vue
<template> <div> <h1>app组件</h1> <router-link to="/account">account</router-link> <router-link to="/goodslist">goodslist</router-link> <router-view> </router-view> </div> </template> <script> export default { } </script> <style lang=""> </style>
account.vue和goodslist.vue组件为简单的template。
在account组件中加上 登录和注册
main.js
import Vue from ‘vue‘ // 1,导入 vue-router包 import vueRouter from ‘vue-router‘ // 导入app组件 import app from ‘./app.vue‘ // 导入其他组件 import account from ‘./components/account.vue‘ import goodslist from ‘./components/goodslist.vue‘ import login from ‘./components/login.vue‘ import register from ‘./components/register.vue‘ // 2,手动安装vueRouter Vue.use(vueRouter); // 3,创建路由对象 var router = new vueRouter({ routes: [ // account goodslist { path: ‘/account‘, component: account, children : [ { path : ‘login‘ , component : login}, { path : ‘register‘ , component : register} ] }, { path: ‘/goodslist‘, component: goodslist } ] }) var vm = new Vue({ el: ‘#app‘, render: c => c(app), // render会把el 指定的容器中所有的内容都清空覆盖 // 所以不要把router-view和router-link直接写到 el 所控制的元素中。 router }) // 注意app这个组件是通过vm实例的render函数渲染的,render函数如果要渲染组件 // 渲染出来的组件只能放到el : ‘#app‘ 所指定的元素中去。 // account 和 goodslist组件是通过路由匹配监听到的,所以,这两个组件只能展示到 // 属于路由的<router-view></router-view>中去。
account.vue
<template> <div> <router-link to="/account/login">登录</router-link> <router-link to="/account/register">注册</router-link> <router-view></router-view> </div> </template> <script> export default { } </script> <style lang=""> </style>
<style lang="scss" scoped> // scoped只让样式在当前组件生效 /* 普通的style标签只支持普通的样式 */ /* 要启用scss或less,需要为style元素设置lang属性 */ body { div { color: green; } } </style>
需要把vuerouter,和引入的组件,抽离到router.js
router.js 需要注意:main.js和router.js 都需要导入vue-router
// 导入其他组件 import account from ‘./components/account.vue‘ import goodslist from ‘./components/goodslist.vue‘ import login from ‘./components/login.vue‘ import register from ‘./components/register.vue‘ import vueRouter from ‘vue-router‘ // 3,创建路由对象 var router = new vueRouter({ routes: [ // account goodslist { path: ‘/account‘, component: account, children : [ { path : ‘login‘ , component : login}, { path : ‘register‘ , component : register} ] }, { path: ‘/goodslist‘, component: goodslist } ] }) // 向外暴露 router export default router
Vue系列之 => 结合webpack使用vue-router
标签:children char 结合 ESS 直接 outer one initial 对象
原文地址:https://www.cnblogs.com/winter-shadow/p/10269441.html