394 vue路由使用注意事项
- 入口
- 最常用的入口 是 声明式导航 router-link
<!--
router-link 组件最终渲染为 a标签， to属性转化为 a标签的href属性
to 属性的值 ， 实际上就是哈希值，将来要参与路由规则中进行与组件匹配
<a href="#/one" class="">ONE</a>
-->
<!-- 不是所有的路由 to=""前，都要加冒号: ，写死的路由就不加，to前面不加冒号，就会把属性值当做字符串 -->
<router-link to="/one">首页</router-link>
- 组件
const One = {
template： `<div> 子组件 one </div> `
}
- 演示 ： 多个组件匹配
<div id="app">
<!-- 1 路由入口：链接导航 -->
<!-- 不是所有的路由 to=""前，都要加冒号: ，写死的路由就不加，to前面不加冒号，就会把属性值当做字符串 -->
<router-link to="/one">One</router-link>
<router-link to="/two">Two</router-link>
<!-- 4 路由出口：用来展示匹配路由视图内容 -->
<router-view></router-view>
</div>
<!-- 导入 vue.js -->
<script src="./vue.js"></script>
<!-- 导入 路由文件 -->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3 创建两个组件
const One ={
template： '<h1>这是 one 组件</h1>'
}
const Two = {
template： '<h1>这是 two 组件</h1>'
}
// 0 创建路由对象
const router = new VueRouter({
// 2. 路由规则
routes： [
{ path： '/one'， component： One }，
{ path： '/two'， component： Two }
]
})
const vm = new Vue({
el： '#app'，
//0. 不要忘记，将路由与vue实例关联到一起！
router
})
</script>
02-多个路径.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
准备工作
1. 安装
2. 引入
3. 实例化+挂载
具体步骤
1. 入口
2. 规则
3. 组件
4. 出口
-->
<div id="app">
<!-- 第一步 : 入口
1. 刚才手动写 测试.开发时候用 /one /two
2. 声明式导航
-->
<!--
router-link 声明式导航
router-link 最终会编译成 a 标签
to 转化为href
作用 : 改变入口的哈希值路径
-->
<!-- 最后编译成 <a href="#/one" class="">ONE</a> -->
<router-link to="/one">ONE</router-link>
<!-- <router-link to="/two">TWO</router-link> -->
<!-- 第四步 :出口 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 第三步 : 组件
const One = {
template: `<div>one组件</div>`
}
const Two = {
template: `<div>two组件</div>`
}
// 实例化路由
const router = new VueRouter({
// 规则
routes: [{
path: '/one',
component: One
}, {
path: '/two',
component: Two
}]
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>
