<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
</head>
<body>
+ <a href="/"><< Back to Homepage</a>
+ <hr />
+
<div id="app">
<section class="info">
Name:
</li>
<li>
<a href="/encoding/documents/%E2%82%AC"
- >/n/%E2%82%AC (force reload)</a
+ >/documents/%E2%82%AC (force reload)</a
>
</li>
<li>
<a href="/encoding/documents/€"
- >/n/€ (force reload. not valid but should not crash the router)</a
+ >/documents/€ (force reload. not valid but should not crash the
+ router)</a
>
</li>
</ul>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
</head>
<body>
+ <a href="/"><< Back to Homepage</a>
+ <hr />
+
<div id="app">
<section class="info">
Name:
- <pre id="name">{{ $route.name }}</pre>
+ <pre id="name">{{ route.name }}</pre>
</section>
<section class="info">
Params:
- <pre id="params">{{ $route.params }}</pre>
+ <pre id="params">{{ route.params }}</pre>
</section>
<section class="info">
Query:
- <pre id="query">{{ $route.query }}</pre>
+ <pre id="query">{{ route.query }}</pre>
</section>
<section class="info">
Hash:
- <pre id="hash">{{ $route.hash }}</pre>
+ <pre id="hash">{{ route.hash }}</pre>
</section>
<section class="info">
FullPath:
- <pre id="fullPath">{{ $route.fullPath }}</pre>
+ <pre id="fullPath">{{ route.fullPath }}</pre>
</section>
<section class="info">
path:
- <pre id="path">{{ $route.path }}</pre>
+ <pre id="path">{{ route.path }}</pre>
</section>
<hr />
>
</li>
<li>
- <a href="/encoding/n/%E2%82%AC">/n/%E2%82%AC (force reload)</a>
+ <a href="/hash/#/documents/%E2%82%AC"
+ >/documents/%E2%82%AC (force reload)</a
+ >
</li>
<li>
- <a href="/encoding/n/€">/n/€ (force reload): not valid tho</a>
+ <a href="/hash/#/documents/€"
+ >/documents/€ (force reload): not valid tho</a
+ >
</li>
</ul>
-import { createRouter, createWebHistory } from '../../src'
+import { createRouter, useRoute, createWebHashHistory } from '../../src'
import { RouteComponent } from '../../src/types'
import { createApp } from 'vue'
}
const Document: RouteComponent = {
- template: `<div>Document: {{ $route.params.id }}</div>`,
+ setup() {
+ const route = useRoute()
+ return { route }
+ },
+ template: `<div>Document: {{ route.params.id }}</div>`,
}
const router = createRouter({
- history: createWebHistory('/' + __dirname),
+ history: createWebHashHistory('/' + __dirname),
routes: [
{ path: '/', component: Home, name: 'home' },
{ path: '/documents/:id', name: 'docs', component: Document },
],
})
-const app = createApp({})
+const app = createApp({
+ setup() {
+ const route = useRoute()
+ return { route }
+ },
+})
app.use(router)
window.vm = app.mount('#app')
const args = process.argv.slice(2)
// if we are running yarn dev locally, we can pass --dev to avoid launching another server instance
-const server = args.indexOf('--dev') > -1 ? null : require('../examples/server')
+const server = args.indexOf('--dev') > -1 ? null : require('./server')
// allow running browserstack local
const isLocal = args.indexOf('--local') > -1
"release": "bash scripts/release.sh",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 2",
"build:playground": "webpack --env.prod",
- "dev:examples": "webpack-dev-server --mode=development --config examples/webpack.config.js",
+ "dev:e2e": "webpack-dev-server --mode=development --config e2e/webpack.config.js",
"lint": "prettier -c --parser typescript \"{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
"lint:fix": "yarn run lint --write",
"test:types": "tsc --build tsconfig.json",
projects / thirdparty / vuejs / router.git / commitdiff
