icn 中间路由器可以生成data包吗
1个回答
展开全部
1. 创建组件
首先引入vue.js和vue-router.js:
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
然后创建两个组件构造器Home和About:
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
2. 创建Router
var router = new VueRouter()
调用构造器VueRouter,创建一个路由器实例router。
3. 映射路由
router.map({
'/home': { component: Home },
'/about': { component: About }
})在a元素上使用v-link 指令跳转到指定路径。
5. 使用<router-view>标签
<router-view></router-view>
在页面上使用<router-view></router-view> 标签,它用于渲染匹配的组件。6. 启动路由
var App = Vue.extend({})
router.start(App, '#app'
路由器的运行需要一个根组件router.start(App, '#app') 表示router会创建一个App实例,并且挂载到#app元素。
注意:使用vue-router的应用,不需要显式地创建Vue实例,而是调用start方法将根组件挂载到某个元素。View Demo然后在浏览器中访问地址http:127.0.0.1:8080如果要编译和发布,请在Git Bash下执行以下命令:npm run demo01-build可以登录360官网进行查询了解更多的相关知识,也可以做在线咨询,会有专业的人员为你解答
首先引入vue.js和vue-router.js:
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
然后创建两个组件构造器Home和About:
var Home = Vue.extend({
template: '<div><h1>Home</h1><p>{{msg}}</p></div>',
data: function() {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
2. 创建Router
var router = new VueRouter()
调用构造器VueRouter,创建一个路由器实例router。
3. 映射路由
router.map({
'/home': { component: Home },
'/about': { component: About }
})在a元素上使用v-link 指令跳转到指定路径。
5. 使用<router-view>标签
<router-view></router-view>
在页面上使用<router-view></router-view> 标签,它用于渲染匹配的组件。6. 启动路由
var App = Vue.extend({})
router.start(App, '#app'
路由器的运行需要一个根组件router.start(App, '#app') 表示router会创建一个App实例,并且挂载到#app元素。
注意:使用vue-router的应用,不需要显式地创建Vue实例,而是调用start方法将根组件挂载到某个元素。View Demo然后在浏览器中访问地址http:127.0.0.1:8080如果要编译和发布,请在Git Bash下执行以下命令:npm run demo01-build可以登录360官网进行查询了解更多的相关知识,也可以做在线咨询,会有专业的人员为你解答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询