燕鹏
4 jaren geleden
15 gewijzigde bestanden met toevoegingen van 144 en 74 verwijderingen
Na Breedte: | Hoogte: | Grootte: 1.1 KiB |
@ -0,0 +1,20 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
||||
|
<title>首页</title> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>We're sorry but multipage doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
@ -0,0 +1,62 @@ |
|||||
|
<template> |
||||
|
<div id="app"> |
||||
|
<div id="nav"> |
||||
|
<p>我是app页面,当前appId {{ appId }}</p> |
||||
|
<router-link to="/">Home</router-link> |
||||
|
<router-link to="/about">About</router-link> |
||||
|
</div> |
||||
|
<router-view/> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import HelloWorld from "@/components/HelloWorld"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'home', |
||||
|
components: { |
||||
|
HelloWorld |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
appId: '' |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
if (this.$route.query.appId) { |
||||
|
this.appId = this.$route.query.appId |
||||
|
} |
||||
|
let search = window.location.search |
||||
|
if (search.indexOf('appId') !== -1) { |
||||
|
if (search.indexOf('&') === -1) { |
||||
|
this.appId = search.substring(7) |
||||
|
} else { |
||||
|
let str = search.substring(7) |
||||
|
this.appId = str.substring(0, str.indexOf('&')) |
||||
|
} |
||||
|
} |
||||
|
console.log(`这个是默认页面的主页:${this.$store.state.myname}`) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
#app { |
||||
|
font-family: 'Avenir', Helvetica, Arial, sans-serif; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
text-align: center; |
||||
|
color: #2c3e50; |
||||
|
} |
||||
|
|
||||
|
#nav { |
||||
|
padding: 30px; |
||||
|
|
||||
|
a { |
||||
|
font-weight: bold; |
||||
|
color: #2c3e50; |
||||
|
|
||||
|
&.router-link-exact-active { |
||||
|
color: #42b983; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,28 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import router from './router' |
||||
|
import store from '@/store' |
||||
|
|
||||
|
Vue.config.productionTip = false |
||||
|
|
||||
|
|
||||
|
router.beforeEach((to, from, next) => { |
||||
|
if (!to.query.appId) { |
||||
|
if (from.query.appId) { |
||||
|
to.query.appId = from.query.appId |
||||
|
} else { |
||||
|
to.query.appId = window.location.href.match(/appId=(.*)/)[1] |
||||
|
} |
||||
|
} |
||||
|
next() |
||||
|
}) |
||||
|
|
||||
|
router.afterEach((to, from) => { |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
new Vue({ |
||||
|
router, |
||||
|
store, |
||||
|
render: h => h(App) |
||||
|
}).$mount('#app') |
@ -1,7 +1,7 @@ |
|||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
import Router from 'vue-router' |
import Router from 'vue-router' |
||||
import Home from './views/Home.vue' |
import Home from '@/views/Home.vue' |
||||
import About from './views/About.vue' |
import About from '@/views/About.vue' |
||||
|
|
||||
Vue.use(Router) |
Vue.use(Router) |
||||
|
|
@ -0,0 +1,26 @@ |
|||||
|
import Vue from 'vue' |
||||
|
import VueRouter from 'vue-router' |
||||
|
import Home from '@/views/Home.vue' |
||||
|
|
||||
|
Vue.use(VueRouter) |
||||
|
|
||||
|
const routes = [ |
||||
|
{ |
||||
|
path: '/', |
||||
|
name: 'Home', |
||||
|
component: Home |
||||
|
}, |
||||
|
{ |
||||
|
path: '/about', |
||||
|
name: 'About', |
||||
|
component: () => import(/* webpackChunkName: "about" */ '@/views/About.vue') |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const router = new VueRouter({ |
||||
|
// mode: 'history',
|
||||
|
base: process.env.BASE_URL, |
||||
|
routes |
||||
|
}) |
||||
|
|
||||
|
export default router |
@ -1,29 +0,0 @@ |
|||||
<template> |
|
||||
<div id="app"> |
|
||||
<div id="nav"> |
|
||||
<router-link to="/">Home</router-link> | |
|
||||
<router-link to="/about">About</router-link> |
|
||||
</div> |
|
||||
<router-view/> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="less"> |
|
||||
#app { |
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
text-align: center; |
|
||||
color: #2c3e50; |
|
||||
} |
|
||||
#nav { |
|
||||
padding: 30px; |
|
||||
a { |
|
||||
font-weight: bold; |
|
||||
color: #2c3e50; |
|
||||
&.router-link-exact-active { |
|
||||
color: #42b983; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
@ -1,12 +0,0 @@ |
|||||
import Vue from 'vue' |
|
||||
import App from './App.vue' |
|
||||
import router from './router' |
|
||||
import store from '@/store' |
|
||||
|
|
||||
Vue.config.productionTip = false |
|
||||
|
|
||||
new Vue({ |
|
||||
router, |
|
||||
store, |
|
||||
render: h => h(App) |
|
||||
}).$mount('#app') |
|
@ -1,5 +0,0 @@ |
|||||
<template> |
|
||||
<div class="about"> |
|
||||
<h1>This is an about page</h1> |
|
||||
</div> |
|
||||
</template> |
|
@ -1,21 +0,0 @@ |
|||||
<template> |
|
||||
<div class="home"> |
|
||||
<img src="@/assets/logo.png"> |
|
||||
<HelloWorld msg="多页面测试页"/> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
// @ is an alias to /src |
|
||||
import HelloWorld from '@/components/HelloWorld.vue' |
|
||||
|
|
||||
export default { |
|
||||
name: 'home', |
|
||||
components: { |
|
||||
HelloWorld |
|
||||
}, |
|
||||
mounted() { |
|
||||
console.log(`这个是多页面测试页的主页:${this.$store.state.myname}`) |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
Laden…
Reference in new issue