- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
- <style>
- #app{
- text-align: center;
- }
- .container {
- background-color: #73ffd6;
- margin-top: 20px;
- height: 300px;
- }
- .son{
- margin-top: 30px;
- }
- </style>
- </head>
- <body>
- <div id="app">
- <!-- 通过 router-link 标签来生成导航链接 -->
- <router-link to="/home" tag="button">首页</router-link>
- <router-link to="/list">列表</router-link>
- <div class="container">
- <!-- 将选中的路由渲染到 router-view 下-->
- <router-view></router-view>
- </div>
- </div>
- <template id="tmpl">
- <div>
- <h3>列表内容</h3>
- <!-- 生成嵌套子路由地址 -->
- <router-link to="/list/login">登录</router-link>
- <router-link to="/list/register">注册</router-link>
- <div class="son">
- <!-- 生成嵌套子路由渲染节点 -->
- <router-view></router-view>
- </div>
- </div>
- </template>
- <script>
- // 1.定义路由跳转的组件模板
- const home = {
- template: '<div><h3>首页内容</h3></div>'
- }
- const list = {
- template: '#tmpl'
- }
- const login = {
- template: '<div> 登录页面内容</div>'
- }
- const register = {
- template: '<div>注册页面内容</div>'
- }
- // 2.定义路由信息
- const routes = [
- // 路由重定向:当路径为/时,重定向到/home路由
- {
- path: '/',
- redirect: '/home'
- },
- {
- path: '/home',
- component: home
- },
- {
- path: '/list',
- component: list,
- //嵌套路由
- children: [
- {
- path: 'login',
- component: login
- },
- {
- path: 'register',
- component: register
- },
- // 当路径为/list时,重定向到/list/login路径
- {
- path: '/list',
- redirect: '/list/login'
- }
- ]
- }
- ]
- const router = new VueRouter({
- //mode: 'history', //使用 history 模式还是hash路由模式
- routes
- })
- // 3.挂载到当前 Vue 实例上
- const app = new Vue({
- el: '#app',
- data:{},
- methods: {},
- router: router
- });
- </script>
- </body>
- </html>
复制代码 写了一个vue的路由,不知道网上能否找到在线运行的方法
|
|